HTML Table Basics
By Stephen Bucaro
Html tables aren't used just to display data. Use of an html table has become the
most common method used for general webpage layout. Style Sheets can provide much more
accurate web page layout, but the implementation of style sheets between different
browser versions is inconsistent. So let's review html table coding basics.
You can follow along by using the Windows Notepad program to create a text file
and type in the text indicated. After you save the text file, change the file
extension to .htm and then double-click on the file name to bring it up in your Web
browser.
The primary component of an html table is the "table data" element, represented by
the <td></td> tag pair.
The table data tags enclose a single cell of the table. This cell may contain
text, graphics, forms, or anything else, including entire Web pages. Understanding
html tables would be much easier if the tags used were <tc></tc> because
you also create a table column when you use the table data tag pair.
If you use two pairs of tags, you create two columns. For example the html code
below creates two columns, one containing the text "cell 1" and the other containing the
text "cell2".
<td>cell 1</td><td>cell 2</td>
Table data columns cannot actually be coded as shown above. They can only exist within
a table row. The tag pair <tr></tr> encloses a table row. So the table code
would actually appear as:
<tr><td>cell 1</td><td>cell 2</td></tr>
You can have as many cells as you want in a table row, and you can have as many
rows as you want in a table. In order for this code to actually work, it must be
contained within a <table></table> tag pair.
The complete code for a table with two rows, each containing two cells is:
<table>
<tr><td>cell 1</td><td>cell 2</td></tr>
<tr><td>cell 3</td><td>cell 4</td></tr>
</table>
This code creates the table shown below:
| cell 1 | cell 2 |
| cell 3 | cell 4 |
This code could be written on a single line, or you could place a tag on each line
of your file. Either way will work but the secret to being able to debug your html tables
is to format your code consistently.
Before I show you a preferred method to format your code, let's look at the case of
a table where the number of cells in each row is not the same. A table with two cells
in the first row, and one cell in the second row would be coded as:
<tr><td>cell 1</td><td>cell 2</td></tr>
<tr><td colspan="2">cell 3</td></tr>
</table>
The code above creates the table shown below.
Note the attribute contained within the <td> tag for the second row cell,
colspan="2" defines the cell as spanning two columns.
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
Follow @Stephen Bucaro
General Web Design
