Web Site Building · HTML Advanced Topics · Tables 2

What this is about:

The table tag lets web designers create rows, columns, and cells to display tabular data much like spreadsheets or statistics. But savvy developers quickly came to realize that tables were the missing link in HTML layout control. Always one of the more perplexing issues in web design, page layout suddenly had greater control over placement of images and text with the advent of tables in HTML standard 3.2.

 

 


 


Your Ad Here
Inquire About Rates

 

More About Attributes

Cell Padding Many of the table tags have similar optional attributes, such as ALIGN. All of them also take attributes specific to Cascading Style Sheets and Event attributes for Javascript commands. Most of these attributes work as they do with regular non-table-oriented tags, but a couple of table-specific attributes need to be understood.

CELLPADDING and CELLSPACING are the two attributes to the <TABLE> tag that control spacing in tables. CELLPADDING adjusts the space between the contents of the cell and the edges of that cell, and CELLSPACING adjusts the space between the cells themselves. The WIDTH attribute of the <TABLE>, <TD>, and <TH> tags allows the width of the table or cell to be specified by either a percentage of the screen size (by using the % sign) or by an amount in pixels. The BORDER attribute of the <TABLE> tag specifies the number of pixels wide to make a border between cells, and if it's included without any value, a one-pixel border will be used.

ROWSPAN and COLSPAN are attributes of the <TD> and <TH> tags that allow a cell to be sized to span multiple rows or columns of a table. By specifying an integer value you determine the rows or columns the affected cell should span.

Some Examples

If you are like us, you've found the best learning comes from seeing. So below are a few sample tables along with the HTML code used to produce them. Also, don't forget one of the most powerful tools you have available to you for learning by example; the View Source feature in your browser. When you observe truly creative page layout on the Web, chances are it was done with tables, take a peek at the source code.

This is the simplest of tables. Two columns in one row displaying 70% width. Notice how the border attribute surrounds the cells. The left column uses 47% of the table space, the other 53% on the right. We've set the background colors different in each cell, and finally don't forget to close each of the tag sets.

<table border="1" width= "70%">
<tr>
<td width="47%" bgcolor="#FFFFB0">
Descriptive text goes here.
</td>
<td width="53%" bgcolor="#8DC7C7">
Sample HTML table tags go here.
</td>
</tr>
</table>






In this table we introduce two rows as indicated by the pair of <tr> tags. The columns have equal widths through use of the 50% attribute. Again each cell has a different background color, but this time we've made the table borderless. We've also introduced cellpadding inside each cell.

<table border="0" width= "85%"
cellpadding="15">
<tr>
<td width="50%" bgcolor="#CCFF99">
Descriptive text row 1 goes here.
</td>
<td width="50%" bgcolor="#CCCCFF" rowspan="2">
Sample HTML table tags go here.
</td>
</tr>

<tr>
<td width="50%" bgcolor="#FFDDDD">
Descriptive text row 2 goes here.
</td>
</tr>
</table>

The unusual feature of this table is the different number of rows in each column. Notice the use of the <rowspan> attribute on the middle <td> tag. ROWSPAN and COLSPAN enhance your ability to design ingenuitive layouts for your pages.

As always we recommend you jump right in and try these new techniques to immediately reinforce what you have learned. If you have questions, or suggestions for additional samples, please use the email link at the bottom of the page. Thanks for visiting.


Return to HTML Tables Page 1.

go to the next page


Copyright © 1997-Present Internet Brothers. All Rights Reserved. Privacy Policy. · · ·