Formatting tables with CSS

This post is for Cambridge IGCSE ICT students who must format their HTML using CSS.

1. Borders

Borders can be formatted for the entire table and the “cells” in the table. By default, the borders are invisible.

I am starting with borders as coding tables is tricky if you cannot see the borders. Adding a border rule from the get-go — even if you remove them (or comment them out) later — is recommended!

<table>
	<tr>
		<th>No</th><th>Song</th><th>Artist</th>
	</tr>
	<tr>
		<td>1</td><td>Paint The Town Red</td><td>Doja Cat</td>
	</tr>
	<tr>
		<td>2</td><td>Greedy</td><td>Tate McRae</td>
	</tr>
	<tr>
		<td>3</td><td>Strangers</td><td>Kenya Grace</td>
	</tr>
	<tr>
		<td>4</td><td>Cruel Summer</td><td>Taylor Swift</td>
	</tr>
</table>

The below CSS looks like it will do the job, but you will quickly see that it only adds a border to the entire table (and not the table “cells”):

table {
	border: 1px solid black;
}

Modify the selector as follows:

table, th, td {
	border: 1px solid black;
}

1.1 Collapse

The default, “double” borders are pretty ugly — have a look at a more modern option in the CSS border‑collapse tutorial.

1.2 Border color

You can style the border with any color using any of the acceptable color notations, for example:

• red
• #FF0000
• #F00

1.3 Border style

The style of the line can be set to solid, dotted, dashed, double

You can style the borders separately using:

• border-top
• border-bottom
• border-left
• border-right

2. Width

table {
	width: 100%;
}

3. Row height

We can set row height by settings the height of the td and the elements:

th, td {
	height: 50px;
}

4. Spacing

Border spacing is the space between the borders of the cells in the table.

table {
  border-spacing: 15px;
}

5. Padding

Padding is the empty space between the inside of a cell and the contents of the cell.

Padding is the equivalent of HTML’s cellpadding.

th, td {
	padding: 15px;
}

6. Content alignment

6.1 Horizontal alignment

th, td {
	text-align: left;
}

6.2 Vertical alignment

7. Captions

You can style the <caption> tag and even though it must be inserted immediately after the <table> tag in your code, you can position it at the bottom of the table using the CSS caption-side attribute:

The HTML and inline CSS for the above table appear below:

<table border="1" cellpadding="10" style="border-collapse: collapse;">
	<caption style="caption-side: bottom; text-align: right; font-size: small;">Source details table for Research Question 7</caption>
	<thead>
		<tr>
		<th>Author(s)/Organisation/Publisher</th>
		<td>MisterFoxOnline</td>
		</tr>
	</thead>
	<tbody>
		<tr>
		<th>Name of website</th>
		<td>Stylus</td>
		</tr>
		<tr>
		<th>Name of webpage</th>
		<td>Adding captions to tables in HTML</td>
		</tr>
		<tr>
		<th>Date created/updated</th>
		<td>8 October 2020 / 12 May 2021</td>
		</tr>
		<tr>
		<th>Date accessed</th>
		<td>11 September 2020</td>
		</tr>
		<tr>
		<th>URL</th>
		<td><a href="https://www.stylus.co.za/adding-captions-to-tables-in-html/" target="_blank">https://www.stylus.co.za/adding-captions-to-tables-in-html/</a></td>
		</tr>
	</tbody>
</table>

8. Table alignment

CSS offers many options for layout, so it is sad to see tables still being used as structural elements for entire pages when their function is to present structured, tabulated data.

By default, a table element occupies 100% of the width of its parent element. In most cases, the tables parent element is the body element. If you set the width of the table to less than 100% of the body element, you will discover the default alignment for the table is left alignment.

<table>
    <caption>This is my table</caption>
    <thead>
        <tr>
            <th>ID</th><th>Surname</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td><td>Smith</td>
    </tr>
    <tr>
        <td>2</td><td>Jones</td>
    </tr>
</tbody>
</table>

The Cambridge IGCSE syllabus uses the following CSS to centre a table in the body of a web page:

table {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

You could use the simpler:

table {
    width: 50%;
    margin: auto;
}

9. Next steps

• CSS border‑collapse
• Zebra-striping table using CSS3

References:

1. W3schools. (no date) CSS Styling Tables. Available at: https://www.w3schools.com/css/css_table.asp (Accessed: 8 October 2023).