HTML tables are not what your mother has you set before each meal. They are used as a method of arranging information on a webpage. Tables used to be used for webpage layouts also, but there are much better ways to do that with HTML and CSS now.
Tables are made up of an unlimited number of rows, with each row broken down into the same number of cells to produce a column effect. Text, images, and all other HTML elements can be placed inside of each cell, but cannot be placed directly in the rows themselves.
The basic opening and closing table tags are <table> and </table>. <tr> and </tr> tags begin and end each row of the table. Inside each row, <td> and </td> tags, standing for "table data" begin and end each cell.
When we put these three tags together we get our first table.
<table>
<tr>
<td>
What do you get when you cross a snake and a kangaroo?
</td>
</tr>
</table>
The result is:
| What do you get when you cross a snake and a kangaroo? |
Sooo... what's the point of a table again? More data! Once we add more data, we get to add more rows and cells to organize that data. Also, we can use the <th> and </th> tags to create "table header" cells in a table.
<table>
<tr>
<th>Question:</th>
<th>Answer:</th>
</tr>
<tr>
<td>What do you get when you cross a snake and a kangaroo?</td>
<td>A jump rope!</td>
</tr>
<tr>
<td>What did one plate say to the other plate?</td>
<td>Lunch is on me!</td>
</tr>
</table>
The result is:
| Question: | Answer: |
|---|---|
| What do you get when you cross a snake and a kangaroo? | A jump rope! |
| What did one plate say to the other plate? | Lunch is on me! |
Now tables should make more sense. But wait, there's more!
Now we get to the confusing part. Do you remember how that earlier we mentioned that each row must be broken down into the same number of cells? What if you want one row to have two cells and the next row to only have one cell? Colspan can be used to span multiple columns and produce this effect, rowspan can combine two rows, or part of two rows, into one big cell.
Make any sense yet? I didn't think so. Let's take a look at the HTML:
<table> <tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr> <tr>
<td rowspan="2">Rowspan="2"</td>
<td>1st Row, 2nd Cell</td>
<td>1st Row, 3rd Cell</td>
</tr> <tr>
<td colspan="2">2nd Row, 2nd & 3rd Cells (Colspan="2")</td>
</tr> </table>
The result is:
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Rowspan="2" | 1st Row, 2nd Cell | 1st Row, 3rd Cell |
| 2nd Row, 2nd & 3rd Cells (Colspan="2") | ||
Don't worry, no one is expecting you to memorize this. Experimentation is the best recipe for success.
If one of your table cells is blank, and you do not have data to put in it, your browser might make the cell look funny. You can fix that by putting an HTML "space" in that cell. The HTML space is " ".
You can increase or decrease the size of the border surrounding your table, even to the point of making it disappear. The "border" attribute is used inside the opening table tag. A value of 0, for example, <table border="0">, will make the border disappear, while a value of 5, <table border="5">, will make the border very thick.
Cell padding can create more elbow room inside of each cell. It is set in the opening table tag: <table cellpadding="5">
Cell spacing adds space to the inside of the border around the table and between each cell. It, too, is set in the opening table tag: <table cellspacing="5">
The <tbody> </tbody> element defines a table row group. The <tfoot> </tfoot> element defines a table footer row group. The <thead> </thead> element defines a table heading group. These elements should each include the row and field elements and data that they are applied to.
Tables can have a caption, only one per table, defined by the <caption> </caption> elements inserted directly after the opening <table> element.
The <colgroup> </colgroup> element can be used (when placed after the <caption> </caption> element but before any other table elements) to apply styles to entire columns at once, so that they do not have to repeated row by row.
The <col> </col> element is used within the <colgroup> </colgroup> element to define the column properties.