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?

Foam Seat Cushion

Aching back from coding all day? Try Back Problems

This foam seat cushion relieves lowerback pain, numbness and pressure sores by promoting healthy weight distribution, posture and spine alignment. Furthermore, it reduces pressure on the tailbone and hip bones while sitting. Perfect for sitting on the computer desk for long periods of time.

$ Check price
99.9599.95Amazon 4.5 logo(9,445+ reviews)

More Back Problems resources

Build modern and responsive webpages

Responsive Typography

Build modern and responsive webpages Try Front-end

Responsive web design helps your site maintain its design integrity on a variety of screen sizes, but how does it affect your typography? With this practical book, graphic designers, web designers, and front-end developers alike will learn the nuts and bolts of how to get the best appearance from type without sacrificing performance on any device.

$ Check price
24.9924.99Amazon 4.5 logo(3+ reviews)

More Front-end resources

Ad