Creating a Basic Table

Understanding the Web

How to create a website

Parts of an HTML page

Structure of an HTML Document

Creating and viewing a WEB PAGE

Text formatting in HTML

Organising information using lists

Structure content with tables

Data collection with forms

Navigation with links

Displaying images

There are three elements that every table must contain: table, tr, and td. There are other elements—and I’ll explain them later in this chapter—but these are the three you must start with. The first, table, is at the heart of support for tabular content in HTML and denotes a table in an HTML document. The next core table element is tr, which denotes a table row. HTML tables are row-oriented rather than column-oriented and you must denote each row separately. The last of our three core elements is td, which denotes a table cell. Having defined these three elements, you can combine them to create tables, as shown below.

<html>
  <head>
    <title>Table Example</title>
  </head>
  <body>
    <table>
      <tr>
        <td>Apples</td>
        <td>Green</td>
        <td>Medium</td>
      </tr>
      <tr>
        <td>Oranges</td>
        <td>Orange</td>
        <td>Large</td>
      </tr>
    </table>
  </body>
</html>

Apples	Green	Medium
Oranges	Orange	Large

In this example we have defined a table element that has two rows (denoted by the two tr elements). Each row has three columns, each of which is represented by a td element. The td element can contain any flow content. This is a very simple table, but you can see the basic structure. The browser is responsible for sizing the rows and columns to maintain the table. As an example, see what happens when we add some longer content below.

<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <table>
      <tr>
        <td>Apples</td>
        <td>Green</td>
        <td>Medium</td>
      </tr>
      <tr>
        <td>Oranges</td>
        <td>Orange</td>
        <td>Large</td>
      </tr>
      <tr>
        <td>Pomegranate</td>
        <td>A kind of greeny-red</td>
        <td>Varies from medium to large</td>
      </tr>
    </table>
  </body>
</html>

Apples	Green	Medium
Oranges	Orange	Large
Pomegranate	A kind of greeny-red	Varies from medium to large

The content of each of the newly added td elements is longer than in the previous two rows. You can see how the browser resizes the other cells to make them the same size. One of the nicest features of the table element is that you don’t have to worry about the sizing issues. The browser makes sure that the columns are wide enough for the longest content and that the rows are tall enough for the tallest cell.