Tishk International University

Faculty of Engineering
Computer Engineering Department

Tables and CSS Layout

Musa M. Ameen
Web Programming I (CMPE 341)
6
Week 6
Fall 2024/25
Outline
✓ Table
✓ Table Elements
✓ CSS Structural Pseudo-Class Selectors
✓ Cell Spanning
✓ CSS display Property with Table Values
✓ Absolute Positioning with CSS Position Properties
✓ Relative Positioning

2
Objectives
✓ Learn the difference between data tables and layout tables.
✓ Use table elements to implement data tables.
✓ Use CSS to format table cells with alignment and padding.
✓ Partition a table with the thead and tbody elements.
✓ Appreciate the benefits of web accessibility, and make your tables more web
accessible.
✓ Learn how to span cells across multiple columns or multiple rows.
✓ Use CSS to implement layout tables.
✓ Use CSS to position an element relative to its containing block.
✓ Use CSS to position an element relative to its normal flow.

3
Main Textbook Source
Web Programming with HTML5, CSS, and JavaScript, John Dean

✓ Chapter 5 Tables and CSS Layout

4
Table
A table is a group of cells organized in a two-dimensional structure with rows and columns.
Normally, we think of a table’s cells as holding data, but tables can also be used purely for
presentation purposes.
To use a table for presentation purposes, you position content at particular locations on the
web page using a row-column layout scheme.
Data tables very often hold numbers, but they
can hold text and other types of content as
well.

Unlike data tables, layout tables are not

limited to holding data - they are allowed to
hold any type of content.

Their purpose is to position that content with a

row-column layout scheme.
5
Table Elements
To create a data table, start with a table container element, fill the table element with a tr
element for each of its rows, and fill each tr element with th elements for header cells and td
elements for data cells.

If you include a caption element within a table container, the caption element must be the first
element within the table.
As you’d expect, a table’s caption displays above the table’s grid by default. If you want the
caption’s text displayed at the bottom, you can use the following CSS type selector rule:
caption {caption-side: bottom;}
6
Example

7
Formatting a Data Table: Borders, Alignment, and Padding
To specify whether or not you want borders for a table, you should use CSS’s border-style
property. To specify the border’s width, you should use CSS’s border-width property.
For example, here’s the CSS type selector rule used in the Wind Disasters web page:
table, th, td {border: thin solid;}
In this example, the border property’s first value is thin, which goes with the border-width
property, and the border property’s second value is solid, which goes with the border-style
property.
To add left alignment and padding to every cell, use
this type selector rule:
th, td { text-align: left; padding: 10px; }

To assign a medium width to the table’s outer border

and to assign a thick width to the header cells’ bottom
borders use this code:
table {border-width: medium;}
8
th {border-bottom-width: thick;}
CSS Structural Pseudo-Class Selectors
When you have a collection of elements, sometimes you want to display one or more of those
elements differently from the rest.
You could do that by including class attributes in each element that you want to display
differently. You would then use the class attribute’s value as a class selector in a CSS rule.
But if the number of elements that you want to display with a special format is large, then quite
a few class="value" code insertions would be required.
When there is regularity in the locations of certain elements within a collection of elements,
you can avoid the class="value" code insertions described and, instead, implement that
functionality with a structural pseudo-class CSS rule. Pseudo-classes conditionally select
elements from a group of elements specified by a standard selector.

9
Example – Part 1

10
Example – Part 2

11
Example

12
thead and tbody Elements
If you have header cells at the left, very often you’ll want to differentiate those header cells
from the ones at the top.
The preferred way to differentiate is to put the top cells’ row
(or rows) in a thead element and put the subsequent rows in
a tbody element.
So, you can apply different CSS background-color rules to
the different groups of header cells — midnight blue for the
top cells and violet red for the left-side cells.
thead th {background-color: midnightblue;}
tbody th {background-color: mediumvioletred;}

13
Example – Part 1

14
Example – Part 2

15
Example

16
Cell Spanning
Sometimes data tables will have cells that span more than one of the intersections in a
standard grid.
See the table below, we implemented it using a table element with six rows and three columns.
The Events cell at the top is a merged version of two cells in the first row.
The Mesozoic cell at the left is a merged version of two cells in the first column. Below the
Mesozoic cell, the Cenozoic cell is a merged version of the next three cells in the first column.
If you want to create a merged cell
that spans more than one column,
you’ll need to add a colspan attribute
to a th or td element.

If you want to create a merged cell

that spans more than one row, add a
rowspan attribute to the cell’s th or td
element. 17
Example – Part 1

18
Example – Part 2

19
Example

20
CSS display Property with Table Values
The display property can be used for much more than just inlining block element content. It
can also be used to emulate the various parts of a table.
The table value enables an element, like a div element, to behave like a table. Here’s how you
can do that:
<style>
.table {display: table;}
...
</style>
<body>
<div class="table">
...
</div>
</body>
21
Example

22
Absolute Positioning with CSS Position Properties
If you want table layout where content controls the size of the table’s cells, then use the CSS
display property with table values.
But if you want table layout where the
table’s cell sizes are fixed, you should use
CSS position properties.

Browsers use a default layout scheme

known as normal flow. With normal flow,
within a container, block elements are laid
out from top to bottom, one block element
per row, and phrasing elements are laid
out from left to right in the available space.

To remove an element from the normal

flow, you can use the CSS position
properties shown here.
23
Absolute Positioning with CSS Position Properties
Before showing you how we implement that web page’s layout with CSS position properties,
let’s design the layout with a drawing. See the drawing in figure below.

24
Example

25
Relative Positioning
You can position an element relative to its normal flow within its surrounding content. That’s
called relative positioning. Check the position: relative; property value pairs. That’s how
relative positioning is established. In the .down CSS rule, note the property-value pairs top:
2em and left: 2em. Positive values for the top property move the element down, and positive
values for the left property move the element to the right.

26
References
✓ Dean, J. (2018). Web programming with HTML5, CSS, and JavaScript. Jones &
Bartlett Learning.
✓ CSS Working Group. (2022). What is CSS?. https://www.w3.org/Style/CSS
✓ Hickson, I. (2023, October). A vocabulary and associated APIs for HTML and
XHTML. https://www.w3.org/TR/2011/WD-html5-20110405/
✓ MDN web docs from Mozilla Developer Group. (2023). CSS reference.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

27