04. Tables

When presenting a data on your webpage, it's best to use the HTML <table> element.

Creating an HTML Table

Firstly, just beneath the <table> tag, we write a <caption>.

Similarly to an HTML document, we break our table into three components:

  1. <thead>
    • Specify the column names.
    • Use the <tr> tag to open the header line.
    • Use the <th> to specify each column header name.
  2. <tbody>
    • Use <tr> to add a row.
    • Within each <tr> tag, add a <td> to place a table data cell.
  3. <tfoot>
    • Include any data that characterizes the data in that column.
    • eg. total sum, average, etc.

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
      <th>Expenditures</th>
    </tr>
  </thead>
 
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
      <td>$130</td>
    </tr>
  </tfoot>
 
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
      <td>$50</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
      <td>$30</td>
    </tr>
    <tr>
      <td>March</td>
      <td>$100</td>
      <td>$50</td>
    </tr>
  </tbody>
</table>
Month Savings Expenditures
Sum $180 $130
January $100 $50
February $80 $30
March $100 $50

To have a cell take up more than one space, use the "colspan" and "rowspan" attributes with an integer value within the <td> element.

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
      <th>Expenditures</th>
    </tr>
  </thead>
 
  <tfoot>
    <tr>
      <td>Sum</td>
      <td colspan="2">$50</td>
    </tr>
  </tfoot>
 
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
      <td>$50</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
      <td>$30</td>
    </tr>
    <tr>
      <td>March</td>
      <td>$100</td>
      <td>$50</td>
    </tr>
  </tbody>
</table>
Month Savings Expenditures
Net Earning $50
January $100 $50
February $80 $30
March $100 $50

Styling

HTML is for semantic markup, CSS is for presentation

If you plan on ever learning CSS (which we strong recommend), you can go ahead and gloss over this section. Remember that HTML should handle semantic markup, while we'll use CSS for styling and presentation! :-)

Here is a list of styles you can apply to the "style" attribute. Use the pixel dimension to specify a length.

border
Specifies the width of border.
cellspacing
Space between adjacent cells.
cellpadding
Amount of space between adjacent cells.
width
Width of a table.
Rules
Thickness of table's internal cell borders.
Frame
Which outer border to be drawn. Values include:
Border or box (all borders)
void (no borders)
above (top)
below (bottom)
hsides (top and bottom)
vsides (left and right)
LHS (left-hand-side)
RHS (right-hand-side).

Aching back from coding all day?

Acupressure Mat & Pillow

Aching back from coding all day? Try Back Problems

Relieve your stress, back, neck and sciatic pain through 1,782 acupuncture points for immediate neck pain relief. Made for lower, upper and mid chronic back pain treatment, and improves circulation, sleep, digestion and quality of life.

$$ Check price
144.87144.87Amazon 4.5 logo(1,890+ reviews)

More Back Problems resources

Build modern and responsive webpages

JavaScript & JQuery

Build modern and responsive webpages Try Front-end

This book was written for anyone who wants to use JavaScript to make their websites a little more interesting, engaging, interactive, or usable. In particular, it is aimed at people who do not have a degree in computer science (well, not yet anyway).

$ Check price
39.9939.99Amazon 4.5 logo(385+ reviews)

More Front-end resources

Ad