Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

HTML Table Basics

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:

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

This code creates the table shown below:

cell 1cell 2
cell 3cell 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>

The code above creates the table shown below.

cell 1cell 2
cell 3

Note the attribute contained within the <td> tag for the second row cell, colspan="2" defines the cell as spanning two columns.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2018 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268