HTML/Training/Table

From Web Education Community Group
< HTML‎ | Training
Jump to: navigation, search

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.

Table chall01.png


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


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