HTML TABLE formatting
Previous: HTML TEXT formatting
Tables are used in HTML pages both for presenting structured data formated in rows and columns and for building the web page layout itself. Although, many web masters deny the table usage for building the web page layout and recommend layers to be used instead, the tables provide quick and easy way for beginners to format the entire page and place the content (text and pictures) inside. It is possible and commonly used to place table inside the cell of another table and this is one of the ways for quick and easy formatting.
HTML TABLE element
To define a table in an HTML page three tags are required:
<TABLE> - to start the table definition
<TR> - table row definition starts
<TD> - table cell definition starts
the cell content (table data) placed here
</TD> - table cell definition ends
a number of <TD> table data </TD> tags couples can be placed in one table row definition
</TR> - table row definition ends
The table row definitions together with the correspondeing table cells definitions can be repeeted many times
</TABLE> - to finish the current table structure
Each of the openning tags can hold some formatting elements like: width, aligment, color, border, spaceing, etc.
Example of a table with two rows and three columns:
| Table view | Table HTML code | ||||||
|
<table width="180" border="1" cellspacing="2" cellpadding="0" bgcolor="#ffffcc"> <tr> <td width="20%">cell 1</td> <td width="20%">cell 2</td> <td width="60%"> <div align="center">cell 3</div> </td> </tr> <tr> <td width="20%">cell 4</td> <td width="20%">cell 5</td> <td width="60%"> <div align="center">cell 6</div> </td> </tr> </table> |
The table above has:
- two rows and three columns
- fixed width 180 pixels - width="180"
- border with thickness 1 pixel - border="1"
- space between the cells 2 pixels - cellspacing="2"
- background color with color code #ffffcc - bgcolor="#ffffcc"
The columns has some additional formatting. The first two cells on each row have width defined at 20% from the total table width - width="20%" while the third column is formatted with 60% width. The text in the last column is placed at the center of the column - <div align="center">cell 3</div>
Example of the same table but the table width is defined at 100% and in the cell 6 second table is placed.
| cell 1 | cell 2 |
cell 3
|
||
| cell 4 | cell 5 |
cell 6
|
The tables' HTML code is
| <table width="100%" border="1" cellspacing="2" cellpadding="0" bgcolor="#ffffcc"> <tr> <td width="20%">cell 1</td> <td width="20%">cell 2</td> <td width="60%"> <div align="center"> cell 3</div> </td> </tr> <tr> <td width="20%">cell 4</td> <td width="20%">cell 5</td> <td width="60%"> <div align="center"> cell 6 <table width="200" border="2" bordercolor="Red" cellspacing="0" cellpadding="3" bgcolor="#ffcc94"> <tr> <td>second table<br> cell 1</td> <td>second table<br> cell 2</td> </tr> </table> </div> </td> </tr> </table> |
Top