Lesson 9: Tables

Overview

In this HTML lesson, we show how to create basic tables. Our first example is a simple table with only one row of data in it. Subsequently, we give more complex examples with more columns and rows of data. Our last example is unique and shows how to create a multiplication table. Lastly, we demonstrate how a table is displayed by the browser.

A Simple Table

This first example table contains just two rows of data. The top row is a row of headings that is used to label the columns of data. There is just one row of data below it. The main table element contains two row elements, each containing two elements each.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Name</th>
        <th>Phone</th>
      </tr>
      <tr>
        <td>XoaX.net</td>
        <td>999-999-9999</td>
      </tr>
    </table>
  </body>
</html>

Output

A Larger Table

This table has just two columns, like the preivous example. However, it has three rows of data for sacraments.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Sacrament</th>
        <th>Classification</th>
      </tr>
      <tr>
        <td>Baptism</td>
        <td>Initiation</td>
      </tr>
      <tr>
        <td>Penance</td>
        <td>Healing</td>
      </tr>
      <tr>
        <td>Holy Orders</td>
        <td>Service</td>
      </tr>
    </table>
  </body>
</html>

Output

A Table Extension

This example is an extension of the previous example, with an additional column for age. Also, we have added four sacraments as rows to the table.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Sacrament</th>
        <th>Classification</th>
        <th>Typical Age</th>
      </tr>
      <tr>
        <td>Baptism</td>
        <td>Initiation</td>
        <td>Birth</td>
      </tr>
      <tr>
        <td>Eucharist</td>
        <td>Initiation</td>
        <td>8 and above</td>
      </tr>
      <tr>
        <td>Confirmation</td>
        <td>Initiation</td>
        <td>16</td>
      </tr>
      <tr>
        <td>Penance</td>
        <td>Healing</td>
        <td>8 and above</td>
      </tr>
      <tr>
        <td>Anotining of the Sick</td>
        <td>Healing</td>
        <td>Elderly</td>
      </tr>
      <tr>
        <td>Holy Orders</td>
        <td>Service</td>
        <td>Young Adult</td>
      </tr>
      <tr>
        <td>Holy Matrimony</td>
        <td>Service</td>
        <td>Young Adult</td>
      </tr>
    </table>
  </body>
</html>

Output

A Multiplication Table

This table is a multiplication table. The unique feature of this table is that we have added headers to the row. The first element in each row is a heading and the data inside the table is the product of the column heading and the row heading.

Example4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <table>
      <tr>
        <th>*</th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
      </tr>
      <tr>
        <th>1</th>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <th>2</th>
        <td>2</td>
        <td>4</td>
        <td>6</td>
      </tr>
      <tr>
        <th>3</th>
        <td>3</td>
        <td>6</td>
        <td>9</td>
      </tr>
    </table>
  </body>
</html>

Output

Table Display

To show how the browser understands table, we have added characters between each element of the table. In the browser all of this text that is not inside data or header element is extracted and displayed before the table. As we can also see, the table is a block element.

Example5.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
a
    <table>
b
      <tr>
c
        <th>Name</th>
d
        <th>Phone</th>
e
      </tr>
f
      <tr>
g
        <td>XoaX.net</td>
h
        <td>999-999-9999</td>
i
      </tr>
j
    </table>
k
  </body>
</html>