Internet Brothers - HTML Advanced Topics

Internet Brothers: Helpware for the Cybercommunity - Advanced HTML

Tables 101 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 95% 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= "95%">
<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.	<table border="0" width= "95%"> <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 comments facility in the navigation menu. Thanks for visiting.

To print a copy of an Internet Brothers tip or article, simply take a photograph of your computer screen, develop the film and have the photo enlarged to the font size of your choice.

The Internet Brothers have implemented hierarchical menus for navigation. Easier done than said.

The hierarchical menus were created using Peter Belesis' © Dynomat DHTML scripting tool from Webreference. Give them a visit, you'll like what you learn.

another darn bug

Was this site useful to you?

Disk Crash - A typical computer response to any critical deadline.