Website resource guide, web development,Creating basic tables

Tables are great for design organization for webpages.

Anyone writing HTML needs to be fluent in tables, from creating simple tables for data presentation to combining multiple tables to control complex document layout.

Tables, rows, and columns

The core tag associated with any table is the <table> tag. This tag doesn't create a table in and of itself; instead, it encapsulates all the other tags that specify the layout and content of the table. Every <table> tag has a required end tag, </table>, which tells the browser that your table is finished.

The <table> tag has a variety of attributes, most of which are not needed to create your basic table.

The HTML table model, by default, is row-based. This means that you create a table by defining rows, one at a time, within the <table> tag. Within each row, you create table cells. Each cell within a table is a like a miniature HTML document, with its own text, alignment, and other display options.

The browser collects together the cells, adjusts their sizes so they all fit together, and creates a row. After all the rows are assembled, the browser collects them together and creates the complete table. Since the size of one cell or row may be affected by other cells or rows in the table, the browser may have to go back and adjust other rows to make the table look right. Because of these dependencies, most HTML tables require two passes by the browser: One to size the individual cells and rows, and another to display the final table after making any adjustments.

You may have noticed this when loading a page with large, complex tables. The page display pauses while the browser reads and processes the table, and then the whole table appears at once. This two-pass is a real pain, making your documents display slowly and erratically. To remedy this, HTML 4.0 includes new features that allow one-pass table display, permitting browsers to display tables row by row, as they are received by the browser.

Creating a simple table

The best way to learn table construction is to look at a simple table. Here is a simple table with three rows and three columns:

	Coffee	Cream
Brand	Nescafe	MaxwellHouse
Roast	Columbian	Dark Roast

At first glance, you might think this table has just two rows and two columns, but remember that row and column headings also count as rows and columns in your table.

The HTML that created this table is easy to understand:

     <table border=1>

        <tr>

           <th></th>

           <th>Coffee</th>

           <th>Cream</th>

        </tr>

        <tr>

           <th>Brand</th>

           <td>Nescafe</td>

           <td>MaxwellHouse</td>

        </tr>

        <tr>

           <th>Roast</th>

           <td>Columbian</td>

           <td>Dark Roast</td>

        </tr>

     </table>

The entire table is contained within <table> and </table> tags. Within these tags, three rows are defined, each enclosed within <tr> and </tr> tags. Each of these tag pairs contain all the cells that create one row of the table.

Within each table row, we define three table cells. HTML has two kinds of tags that create table cells: <th>, to create table heading cells, and <td>, to create table data cells. This table, we created header cells in the first row and in the first column of each row, and created data cells in the remainder of the table. Browsers will display header cells differently than data cells, and you should notice a difference in the way your browser displays these cells in our sample table.

The most striking thing about HTML tables is that we only needed one attribute, border, in this whole sequence of tags. The default behavior of HTML tables makes it possible to create attractive tables with very little effort on your part. If you notice, we did not have to specify the number of rows or columns; instead, the browser counted them for us and made the table look right. We also did not have to specify cell alignment or overall table size; again, the browser handled all the detail work. This isn't to say that you can't control all of the properties within the table.

If you are a beginner, practice this simple table a couple of times before continuing on.

<< BACK

Creating Basic Tables