Slide 5.15: HTML tables

HTML Tables

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). A data cell can contain text, images, lists, forms, horizontal rules, tables, etc.

HTML Script Web Display

01<table border="1">
02 <tr>
03  <th>Heading</th>
04  <th>Another Heading</th>
05 </tr>
06 <tr>
07  <td>row 1, cell 1</td>
08  <td>&nbsp;</td>
09 </tr>
10 <tr>
11  <td> </td>
12  <td>row 2, cell 2</td>
13 </tr>
14</table>

Heading	Another Heading
row 1, cell 1
	row 2, cell 2

The following comments are related to the above example:

If a border attribute is not specified, the table will be displayed without any borders.
Headings in a table are defined with the <th> tag.

Tag	Description	Tag	Description
`<table>`	Defines a table.	`<th>`	Defines a table header.
`<tr>`	Defines a table row.	`<td>`	Defines a table cell.
`<caption>`	Defines a table caption.	`<thead>`	Defines a table head.
`<col>`	Defines the attribute values for one or more columns in a table.	`<colgroup>`	Defines groups of table columns.
`<tbody>`	Defines a table body.	`<tfoot>`	Defines a table footer.

Demonstration
The following demonstration shows how the HTML script is displayed on the Web.


<html> <head><title>HTML Working Area</title></head> <body> <table frame="hsides" border="3"> <tr><td>First row</td></tr> </table><br /> <table frame="vsides" border="3"> <tr><td>First row</td></tr> </table><br/> <table frame="box" border="3"> <tr><td>First</td><td>Row</td></tr> <tr><td>Second</td><td>Row</td></tr> </table> </body> </html>

Review: HTML Tables

tc

td

th

tr

Result: