I’m back!
This HTML code sequence:
<table border=2>
<caption align=center >Table Name</caption>
<tr align=center>
<th> Column Header 1</th>
<th> Column Header 2</th>
<th> Column Header 3</th>
</tr>
< tr align=center >
<td> Data row 1, column 1</td>
<td> Data row 1, column 2</td>
<td> Data row 1, column 3</td>
</tr>
< tr align=center >
<td> Data row 2, column 1</td>
<td> Data row 2, column 2</td>
<td> Data row 2, column 3</td>
</tr>
</table>
Yields:
Table Name
| Column Header 1 |
Column Header 2 |
Column Header 3 |
| Data row 1, column 1 |
Data row 1, column 2 |
Data row 1, column 3 |
| Data row 2, column 1 |
Data row 2, column 2 |
Data row 2, column 3 |
Now, let’s try to break this apart:
The first tag pair is <table>…</table>. The <table> tag starts the table and the </table>tag ends it. Notice that these two tags enclose the entire table. <table>can take the align, border, cellpadding, and width attributes. We will get into attributes After the tags are described, some common attributes will be discussed.
The next tag pair is <caption>…</caption>. The <caption> tag starts the caption and the </caption>tag ends it. <caption>takes only the align attribute.
The next tag pair is <tr>…</tr>. <tr>tag starts a table row and the </tr> tag ends it. <tr>takes only the align and valign attributes.
The next tag pair is <th>…</th>. <th>fills a table row and </th> ends it. <th>takes only the align and valign attributes. The <th> tag is the same as the <td> tag, except that the data for the cells are presented in bold type and centered by default.
The next tag pair are <td>…</td>. <td>fills a table row and the </td> ends it. <td>takes only the align and valign attributes.
Attributes:
align=[left, center or right} – Aligns data within a cell, a caption or the table itself on a page.
border=[numeric} – Establishes a border around the table with the border width of [numeric] pixels.
cellpadding={numeric] – Enlarges the cells in a table with padding around each cell’s data of [numeric] pixels.
Valign=[top, middle or bottom] – Vertically aligns cell data within a cell.
There are other attributes, but I leave it to the reader to pursue this if interested. I rarely use attributes outside these 4.
Those really interested in delving into more than table basics can explore this site. It contains just about everything that you wanted to know about HTML tables and more.
Note: If you save the examples as type ‘html’, you can examine the result of your work. The WP processes do not support the full richness of the HTML language in comments and posts.
This is our open thread. Please feel free to offer your own comments on this or any other topic.