HTML Tables

HTML Tables

• Tables are defined with the <table> tag.
• A table is divided into rows with the <tr> tag. (tr stands for table row)
• A row is divided into data cells with the <td> tag. (td stands for table data)
• A row can also be divided into headings with the <th> tag. (th stands for table heading)
• The <td> elements are the data containers in the table.
• The <td> elements can contain all sorts of HTML elements like text, images, lists, other tables, etc.
• The width of a table can be defined using CSS.

Example

<table style="width:300px">
<tr>
  <td>Jill</td>
  <td>Smith</td>
  <td>50</td>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>
  <td>94</td>
</tr>
</table> 

An HTML Table with a Border Attribute

If you do not specify a border style, the table will be displayed without borders.
A border can be adding using the border attribute:

Example

<table border="1" style="width:300px">
<tr>
  <td>Jill</td>
  <td>Smith</td>
  <td>50</td>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>
  <td>94</td>
</tr>
</table> 

HTML Table Headings

Headings are defined with the <th> tag.
All major browsers display headings as bold and centered.

Example

<table style="width:300px">
<tr>
  <th>First</th>
  <th>Last</th>
  <th>Points</th>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>
  <td>94</td>
</tr>
</table> 

HTML Table Tags

Tag	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
<caption>	Defines a table caption
<colgroup>	Specifies a group of one or more columns in a table for formatting
<col>	Specifies column properties for each column within a <colgroup> element
<thead>	Groups the header content in a table
<tbody>	Groups the body content in a table
<tfoot>	Groups the footer content in a table