Slide 6.15: HTML tables

Slide 6.14: HTML images
Slide 7.1: HTML lists
Home Print version

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

 <table border="1">
  <tr>
   <th>Heading</th>
   <th>Another Heading</th>
  </tr>
  <tr>
   <td>row 1, cell 1</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td> </td>
   <td>row 2, cell 2</td>
  </tr>
 </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:

◀
Previous

Slide 6.14: HTML images
Slide 7.1: HTML lists
Home Print version

▶
Next

It is important to have a good vocabulary.
If I had known the difference between the words “antidote” and “anecdote,”
one of my good friends would still be alive.