HTML/Training/Tables

• HTML Educational Materials
  • Week 3
    • Tables
      • Table
    • Forms
      • Form
      • Form controls

Table

<table>
  <caption>HTML History</caption>
  <tr>
    <th>Version</th>
    <th>Published year</th>
  </tr>
  <tr>
    <td>HTML+</td>
    <td>1993</td>
  </tr>
  <tr>
    <td>HTML2.0</td>
    <td>1995</td>
  </tr>
</table>

Table

Tables are specified by <table>.

<table>

</table>

See also The table element.

Table row

Table rows are specified by <tr>.

<table>
  <tr>
  </tr>
</table>

See also The tr element.

Table data

Table data cells are specified by <td>. <td> holds the content of a data cell.

<table>
  <tr>
    <td>HTML+</td>
    <td>1993</td>
  </tr>
</table>

See also The td element.

Table heading

Table heading cells are specified by <th>.

• The text between <th> ... </th> will be bold and centered.

<table>
  <tr>
    <th>Version</th>
    <th>Published year</th>
  </tr>
  <tr>
    <td>HTML+</td>
    <td>1993</td>
  </tr>
</table>

See also The th element.

Captions

Captions are specified by <caption>.

• <caption> must be as the first element child of a table element.

<table>
  <caption>HTML History</caption>
  <tr>
    <th>Version</th>
    <th>Published year</th>
  </tr>
  <tr>
    <td>HTML+</td>
    <td>1993</td>
  </tr>
</table>

See also The caption element.

Challenge

try it

1. Let's make a shop history's table.

[about.html]

<table border="1">
  <tr>
    <th>Year</th>
    <th>History</th>
  </tr>
  <tr>
    <td>2005</td>
    <td>W3C cafe opens first store in Boston</td>
  </tr>
  <tr>
    <td>2007</td>
    <td>W3C cafe opens first stores outside of USA</td>
  </tr>
  <tr>
    <td>2010</td>
    <td>W3C cafe opens online stores</td>
  </tr>
</table>

2. Check your Web browsers.

The element introduces here is not all. Let's see also Tables.

In the next content, you will learn the User-submit Forms. "Forms"