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).

Build modern and responsive webpages

The Modern Web

Build modern and responsive webpages Try Front-end

The Modern Web will guide you through the most important tools of device-agnostic web development, including HTML5, CSS3, and JavaScript. The plain-english explanations and practical examples emphasize the techniques, principles, and practices that you'll need to easily transcend individual browser quirks and stay relevant as these technologies are updated.

$ Check price
34.9534.95Amazon 4.5 logo(30+ reviews)

More Front-end resources

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

Ad