Proper Use Of Tables

Creating a Table

TABLES SHOULD NOT BE USED TO SET YOUR LAYOUT. Regardless of what other people tell you, this is an outdated practice that slows loading time and are not good for consistency over browsers. Tables should be used to hold data that would normally be displayed in a table offline, in Word, in Excel. If you do not need Excel to organize data, it is likely that you do not need a table.

Tables are broken up into rows and columns. The rows run horizontally and the columns run vertically. When you are using tables you will put your data in based on the row. To start your table you use the table tag. Then for each row your table will have you use the tr tag. For each cell that will be in your table, or how many columns are in your table you will use the td tag.

<table>

<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>

<tr>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
</tr>

<tr>
<td>Cell 9</td>
<td>Cell 10</td>
<td>Cell 11</td>
<td>Cell 12</td>
</tr>

</table>

It can get confusing what's where so it can be a good idea to have a reference like an excel spreadsheet or a drawing to plan out what you will be doing.

Adding Cells Across Multiple Rows and Columns

To make things more complicated you can make a cell span multiple rows and columns. Cell will be named with the td tag in the first cell it would appear in. Then you would use the attributes colspan or rowspan. The cell will then span across the row or columns you have specified. You need to keep track of where they are spanning though, because you will not code a cell where they are flowing into.

<table>

<tr>
<td rowspan="4">Cell 1</td>
</tr>

<tr>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td colspan="2">Cell 8</td>
</tr>

<tr>
<td>Cell 9</td>
<td>Cell 10</td>
<td>Cell 11</td>
</tr>

</table>

The colspans and rowspans were very helpful when it came to using tables for layouts, however I must repeat that you should NOT do this.

Styling a Table

When styling a table you can talk to the entire table, the rows, or the individual cells. Normally you should set some kind of width on the table as mentioned in the layout section. You should also set padding, margins, and possibly borders on the cells as mentioned in the borders/margins/padding section of the site. Background colors can be useful as well to distinguish which data goes with what, it is a good idea to set every other row to a color, you can see how to do this in the background section.

Tables are a great way to illustrate that everything you have learned in this series of tutorials can be combined in various different way to get different outcomes. That being said, good luck coding!