HTML Tables come in all shapes and sizes…
The cool thing is that when you’re making HTML Tables… you get to determine what shape and size they are.
This is a very simplified version of HTML code for tables, meant to give you the basics.
Table tags are defined as:
<table>
<table border=”#”>
<th> = Table Heading
<tr> = Table Row
<td> = Table Data
This set of commands:
<table border=”2″>
<tr>
<th>Table Heading Row 1, cell 1</th>
<th>Table Heading Row 1, cell 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Would look like this:
| Table Heading Row 1, cell 1 | Table Heading Row 1, cell 2 |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell |
The <td> cell can contain text, images, colors and so on. If you want to alter the data the entire table you have to do it individually by <td> cells.
In the 1st row, the text is centered <td style=”text-align: center;”>, Bold <b> and Italic <i>.
In the 2nd row, the background colors are Red <td bgcolor=”FF0000″> and Green <td bgcolor=”#00FF00″>.
This set of commands:
<table border=”2″>
<tr>
<th>Table Heading Row 1, cell 1</th>
<th>Table Heading Row 1, cell 2</th>
</tr>
<tr>
<td style=”text-align: center;”><b><i>row 1, cell 1</center></b></i></td>
<td style=”text-align: center;”><b><i>row 1, cell 2</center></b></i></td>
</tr>
<tr>
<td bgcolor=”#FF0000″>row 2, cell 1</color></td>
<td bgcolor=”#00FF00″>row 2, cell 2</color></td>
</tr>
</table>
Would look like this:
| Table Heading Row 1, cell 1 | Table Heading Row 1, cell 2 |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
This may not be a super in depth tutorial about HTML Tables, but it gives you a foundation to start with.
