learn advanced and basic html - lesson 5
TRANSCRIPT
HTML TablesTag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
Cellpadding Property to add padding to cells
Cellspacing Property to set the spacing between cells
Colspan Attribute to make a cell span many columns
Rowspan Attribute to make a cell span many rows
Border Property to define a border
Defining HTML Tables
<body><table> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr><td>John</td> <td>Doe</td> <td>80</td> </tr></table></body>
An HTML Table with a Border AttributeIf you do not specify a border for the table, it will be displayed without borders. A border can be added using the border attribute:
<body><table border="1px"> <tr><td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr><td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr><td>John</td> <td>Doe</td> <td>80</td> </tr></table></body>
HTML Table Headings
Table headings are defined with the <th> tag.By default, all major browsers display table headings as bold and centered:
<body><table border="1px"> <tr><th>Firstname</th> <th>Lastname</th> <th>Points</th> </tr> <tr><td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr><td>Eve</td> <td>Jackson</td> <td>94</td> </tr></table></body>
HTML Table Tag
<body><table border="1px"><thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Total</th> </tr> </thead> <tbody> <tr> <td>Jill</td> <td>Smith</td> <td>50</td></tbody><tfoot> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </tfoot></table></body>
Table Cells that Merge Many Columns
<body><h2>Cell that spans two columns:</h2><table border="1px"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr></table></body>
To make a cell span more than one column, use the colspan attribute:
Table Cells that Merge Many Rows
<body><h2>Cell that spans two rows:</h2><table border="1px"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr></table></body>
To make a cell span more than one row, use the rowspan attribute:
Cellpadding
<body><h2>Cell that spans two rows:</h2><table border="1px" cellpadding="15px"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr></table></body>
To make a cell span more , use the Cellpadding attribute:
Table Cellspacing
<body><h2>Cell that spans two rows:</h2><table border="1px" cellspacing="20px"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr></table></body>
To make a cell span more than one row, use the Cellspacing attribute:
PRACTICALIMPLEMENTATION
