HTML - table tags
Here you learn how to code table tags.
Table tag
The <table> tag is used to create tables of information and is almost always further formatted by using different attributes. After the opening <table> tag, you make an opening table row tag, <tr>, to begin the first row of the table. Then you create and opening table cell tag, <td>, to put information in each cell. "tr" stands for "table row" and "td" stands for "table data".|
<html> <head> <title>HTML tutorial</title> </head> <body> <br> <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> <br><br> </body> </html> |
||
|
||||||
Table tag - Border attributes
There are 2 main border attributes - border and bordercolor. Border sets the width of the border and bordercolor sets the color of the border. Check out the example below to see how they are used. You don't need to have a border on your table.|
<html> <head> <title>HTML tutorial</title> </head> <body> <br> <table border="5" bordercolor="blue"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> <br><br> </body> </html> |
||
|
||||||
Table tag - Cellspacing and Cellpadding attributes
There are 2 main spacing attributes - "cellspacing" and "cellpadding". "Cellspacing" sets the amount of space between the cells in the table. Most of the time this will be equal to 0 or 1. "Cellpadding" sets the amount of space between the text inside a cell and the border of that cell. Looking at the examples below will probably make it more clear.|
<html> <head> <title>HTML tutorial</title> </head> <body> <br> Here the cellspacing is equal to 5 and the cellpadding is equal to 2.<br> <table border="1" cell spacing="5" cellpadding="2"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> <br><br> Here the cellspacing is equal to 1 and the cellpadding is equal to 15.<br> <table border="1" cell spacing="1" cellpadding="15"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> <br><br> </body> </html> |
||
|
Here the cellspacing is equal to 5 and the cellpadding is equal to 2.
Here the cellspacing is equal to 1 and the cellpadding is equal to 10.
|
||||||||||
Table tag - Empty cells.
Browsers have problems showing empty cells correctly because they leave out the border of the cell if the cell has no information in it. To corrrect this you need to add a "non-breaking space" ( ) to empty cells. The following 2 examples show one table with an empty cell followed by a table with a non-breaking space.|
<html> <head> <title>HTML tutorial</title> </head> <body> <br> <table border="1" cell spacing="5" cellpadding="5"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td></td> </tr> </table> <br><br> <br> <table border="1" cell spacing="5" cellpadding="5"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td> </td> </tr> </table> <br><br> </body> </html> |
||
|
||||||||||
Table tag - Row span and column span
The "rowspan" attribute formats a table that that you can have a cell that takes up more than one row. A "colspan" attribute formats a table so that you can have a cell take up more than one column. The tables below do a better job of explaining how it works.|
<html> <head> <title>HTML tutorial</title> </head> <body> <br> <table border="1"> <tr> <td>Name</td> <td colspan="2">Telephone</td> </tr> <tr> <td>John Smith</td> <td>123-456-7890</td> <td>123-456-7891</td> </tr> </table> <br><br> <table border="1"> <tr> <td>First Name:</td> <td>John Smith</td> </tr> <tr> <td rowspan="2">Telephone:</td> <td>123-456-7890</td> </tr> <tr> <td>123-456-7891</td> </tr> </table> <br><br> </body> </html> |
||
|
|||||||||||||
Bookmark this page:
|
Rate this page: |
Comments:
 |
please post comments |  |
|
admin November 21, 2006 |
||
