In HTML, tables make it easy to lay out data, text, and even images in a grid. Tables help make it easy to present numerical data (which naturally appears in tabular form in spreadsheets and other similar applications).
But tables also make it easy and convenient to present all kinds of information that naturally falls into rows and columns, and to help maximize space when introducing lots of terms or other items that would waste too much white space if run up against the left or right margins on a page.
If you look at things the right way, all the interesting capability and complexity in HTML tables build from three basic elements:
Borders: Every basic table has exactly four edges that compose a rectangle.
Cells: These are the individual areas for data, information, images, or whatever, inside the borders of a table.
Cell span: Within the four-walled structure of a table, you can add or delete cell walls (as shown with the cells on the right side of the table in the figure). When you delete cell walls, you make a cell span multiple rows or columns — and that’s exactly what makes tables so flexible in accommodating different and interesting cell arrangements.
Cell spanning and cell width work differently. When you span cells, you change cell space by combining or merging cells. This step removes cell walls, so to speak. When you adjust the dimensions of a cell, usually using CSS width and height controls, you can specify how much space they will occupy.
The table in the figure shows how you can create an interesting layout simply by spanning the cells in the top and bottom rows (labeled 1 and 7), with two left cells (cells 2 and 3) that span two rows, and three right cells (cell 4 spanning two columns, and cells 5 and 6 side by side).
Leaving aside details on how to control overall table width and individual cell heights and widths, here’s what the basic HTML for such a table looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Table sketch</title>
</head>
<body>
<table border="1">
<tr><td colspan="4"> 1 </td></tr>
<tr><td rowspan="3" > 2 </td>
<td rowspan="3" > 3 </td></tr>
<tr><td colspan="2"> 4 </td></tr>
<tr><td> 5 </td><td> 6 </td></tr>
<tr><td colspan="4"> 7 </td></tr>
</table>
</body>
</html>
Careful examination of this file shows that numbers included for each of the boxes in that table, numbered 1 through 7, to demonstrate how the table lays out. As you’re developing your own table structures, you might want to take a similar approach so you can see and understand exactly what you’re doing.
Try labeling the individual boxes with incrementing numbers so you can see how the organization plays itself out on a web page.
You don’t need to populate your table with real content or mess around much with the sizing approach that the file contains in its CSS style sections. Count the total number of cells across in your table, add one to that number, and then multiply the result by four em-widths to get the table width (20em in the example).
Use 4em as the cell width in the table data () element style information, and you’re good to go. If you keep the overall table width in sync with the number of cells across, you can’t go wrong!
After you’ve worked out all the kinks with the arrangement of the individual cells, you can start tweaking the style attributes to your heart’s content to make the table as readable and attractive as possible. First, though, you’ll want to get the arrangement right. After that, everything else is window dressing.