Warning:
This wiki has been archived and is now read-only.

Educational materials/Table

From HTML Wiki
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.

[Example] 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>About | W3C cafe</title>
  <meta name="description" content="The W3C cafe is .....">
  <meta name="keywords" content="W3C cafe, coffee, .....">
</head>
<body>
  <h1>What is W3C cafe</h1>
  <p>W3C cafe is .....</p>
  <h2>History</h2>
  <p>W3C cafe is .....</p>
  <table>
    <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>
  <h2><a href="menu.html">Menu</a></h2>
  <ul>
    <li><a href="menu.html#food">Food</a></li>
    <li><a href="menu.html#drink">Drink</a></li>
  </ul>
</body>
</html>

2. Check your Web browsers.


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

Retrieved from "https://www.w3.org/html/wiki/index.php?title=Educational_materials/Table&oldid=1676"