A Review of HTML Table Syntax

Contact Us or call 1-877-932-8228
A Review of HTML Table Syntax

A Review of HTML Table Syntax

The following code sample shows a basic unstyled table:

Code Sample:

StylingTables/Demos/TableHomeRuns.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Home Run Hitters</title>
</head>
<body>
<table summary="This table shows the all-time home run leaders in major league baseball.">
	<caption>All-time Home Run Leaders</caption>
	<thead>
		<tr>
			<th>Player</th>
			<th>Home Runs</th>
			<th>Team</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td colspan="3">*Alleged steroid user</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>Barry Bonds*</td>
			<td>762</td>
			<td>Giants</td>
		</tr>
		<tr>
			<td>Hank Aaron</td>
			<td>755</td>
			<td>Braves</td>
		</tr>
		<tr>
			<td>Babe Ruth</td>
			<td>714</td>
			<td>Yankees</td>
		</tr>
	</tbody>
</table>
</body>
</html>

The following table shows the structural and informational attributes used in HTML tables:

Table Structural and Informational Attributes
Attribute Tags
summary table
colspan th, td
rowspan th, td

Most other attributes are for formatting and can be replaced with CSS.

The following table shows the formatting attributes used in HTML tables and their CSS replacements:

CSS for Tables
Attribute CSS Replacement Tags
cellspacing border-collapse and border-spacing table
cellpadding padding (applied to cells) table
border border table
background background-image table, th, td
bgcolor background-color all
width width table, th, td
height height table, tr, th, td
align text-align tr, th, td
valign vertical-align tr, th, td

Some of the CSS replacements shown in the table above can be used in other table tags. For example:

  • The border property can be applied to td and th as well as the table tag.
  • The text-align property can be applied to table, thead, tbody, and tfoot as well as the tr, th, and td tags.

We'll only discuss the cellpadding, cellspacing, and border replacements in this lesson as the other properties are all general formatting properties that have no specific behavior unique to tables.

Border-spacing

The border-spacing property is used to specify the space between adjacent borders and the content surrounding the table.

Code Sample:

StylingTables/Demos/border-spacing.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#spacing-0 {
	border-spacing: 0px;
}

#spacing-10 {
	border-spacing: 10px;
}

#spacing-20 {
	border-spacing: 20px;
}

td {
	border: 10px solid black;
	padding: 20px;
}

caption {
	font-weight: bold;
}
</style>
<title>border-collapse</title>
</head>

<body>
	<table id="spacing-0">
		<caption>border-spacing: 0px;</caption>
		<tr>
			<td>1</td>
			<td>2</td>
		</tr>
	</table>
	<hr>
	<table id="spacing-10">
		<caption>border-spacing: 10px;</caption>
		<tr>
			<td>1</td>
			<td>2</td>
		</tr>
	</table>
	<hr>
	<table id="spacing-20">
		<caption>border-spacing: 20px;</caption>
		<tr>
			<td>1</td>
			<td>2</td>
		</tr>
	</table>
</body>
</html>

The above code renders as follows: Border Spacing

Border-collapse

  • collapse - adjacent borders merged
    • default
  • separate - adjacent borders not merged
  • cr
  • Border Collapse Separate
  • Border Collapse Collapse
copy

The border-collapse property takes the values separate and collapse. It is used to indicate whether adjacent borders should be merged (collapse) or not (separate). The default behavior is to keep the borders separate. For example, if two adjacent borders have 5px borders, a 10px border would appear between them.

The screenshot below illustrates this: Border Collapse Separate

Notice the border between cells 1 and 2 is twice the width of the edge borders. The rule used to achieve this effect is shown below:

table {
	border-spacing: 0px;	
	<em> border-collapse: separate;</em> 
}

As separate is the default, the border-collapse declaration could be left out.

The screenshot below shows how the border changes when border-collapse is set to collapse: Border Collapse Collapse

Notice the dividing border is now the same width as the edge borders.

Some things to note about border-collapse:

  • When border-collapse is set to collapse, border-spacing becomes moot.
  • When collapsing borders, if two adjacent cells have different border widths, the wider of the two borders will be used.

border

The deprecated border attribute of the table tag affects all the borders of the table. It is not possible to have borders on some rows or cells but not others. Likewise, it is not possible to have vertical borders without horizontal borders. It's all or nothing.

CSS gives you much more control. It allows you to control the borders of each side of the table and each side of each cell independently using the border properties discussed in Borders.

For example, to apply a 2px solid dark-blue border to the top and bottom of the table, but not to the left and right, you could use the following CSS:

table { border-collapse: collapse; border-top: 2px solid darkblue; border-bottom: 2px solid darkblue; }

You might then wish to add light-blue horizontal borders within the table:

td, th { border-top: 2px solid lightblue; border-bottom: 2px solid lightblue; }

The result of adding code differs between browsers. In Firefox and Safari, the cell borders take precedence over the table border, so the dark blue borders defined for the table will be replaced by the light blue borders. Not so in Internet Explorer, which gives precedence to the table border.

Now let's add silver vertical borders within the table by adding a couple of declarations to the td, th rule:

td, th { border-top: 2px solid lightblue; border-bottom: 2px solid lightblue; border-left: 2px solid silver; border-right: 2px solid silver; }

We now have a table that looks something like this (FF and Safari on the left, IE on the right): Table Borders

One fix for the different approach to border precedence would be to apply a dark blue border to the top border of cells in the top row and to the bottom border of cells in the bottom row of the table. But let's instead get rid of the outer table border entirely. That should be easy enough to do - just get rid of the border-top and border-bottom declarations for the table tag. It's not as simple as that though, because the top and bottom rows have borders and so do all the left-most and right-most cells. Here's the trick:

table { border-collapse: collapse; border: 2px solid #fff; /*for older IE*/ border-style:hidden; }

As you can see from the comments, we need to add a special declaration for older IE browsers. But it gets the job done: Table Without Border

padding

The padding property should be applied to table cells (e.g., th and td) to create a buffer between their content and the cell borders. For example, to add space around the content in the cells in the table header, you could do this:

thead th { padding: 5px; }

You might also want to push down the content in the footer of the table some:

tfoot td { padding-top: 10px; }

As you can imagine, with all this control, you have the ability to design some pretty slick tables, a lot slicker anyway than you could with plain old HTML. By adding colors and modifying other properties, we have improved our table's appearance: Styled Table

The code for this page is in StylingTables/Demos/borders.html.

Next