This forum is now read-only. Please use our new forums! Go to forums

0 points
almost 9 years

What are the uses of tables?

I like how you can add them to your page but I just don’t see the point in them, could anyone tell me some cool things to do with them please?

Answer 5585fcf5e0a3002476000962

-1 votes
Best answer

Permalink

We use tables all the time to represent data sets. A spreadsheet is a table. It is a worksheet with columns and rows. Columns have headings and everything under them is associated with those headings. Likewise, rows can have headings so that everything in that row is associated with those headings. HTML tables can be made to perform the exact same function.

Tables have been and still are used in some layouts to contain content, not data as such. This has been on ongoing discussion for years. Is it good? Or is it bad? I won’t get into the pro’s and con’s, but I do favor CSS layouts to table layouts. Your reading will uncover lots of differing opinions on the topic.

Focusing on arrangement of data is a good place to plant yourself and explore. Study up on best practice for data tables so you get introduced to all the concepts, not just what is introduced here. We are only scratching the surface at Codecademy. There is much more to the story.

points
Submitted by Roy
almost 9 years

1 comments

It will come more useful me in future projects , just not the ones i have at the minute , but thanks.

Answer 5585fd01e0a3006892000b88

0 votes

Permalink

Copy the following to your text editor and save it on your machine as rainbow-table.html. Locate the file and click it to open in a browser window.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Physical Properties of the Colors in a Rainbow</title>
<style>
    table { border-collapse: collapse; }
    caption { margin: 1em 0; }
    table, th, td { border: 1px solid #999; }
    th, td { min-width: 9em; line-height: 1.6em;  }
    td { text-align: center;}
    tbody th, tbody td { color: #ccf; }
    th[scope] { color: #666; background: #fed; }
</style>
</head>
<body>
<table>
  <caption>Colors of the rainbow, their wavelengths and frequencies</caption>
  <thead>
    <tr><th colspan="3">Physical Properties of the Colors in a Rainbow</th></tr>
  </thead>
  <tfoot>
    <tr><th colspan="3">Source: <a href="https://en.wikipedia.org/wiki/Color">Wikipedia</a></th></tr>
  </tfoot>
  <tbody>
    <tr>
      <th scope="col">Color</th>
      <th scope="col">Wavelength (&lambda;)</th>
      <th scope="col">Frequency (&fnof;)</th>
    </tr>
    <tr style="background: red">
      <th scope="row">Red</th>
      <td>~ 700&ndash;635 nm</td>
      <td>~ 430&ndash;480 THz</td>
    </tr>
    <tr style="background: orange">
      <th scope="row">Orange</th>
      <td>~ 635&ndash;590 nm</td>
      <td>~ 480&ndash;510 THz</td>
    </tr>
    <tr style="background: yellow">
      <th scope="row">Yellow</th>
      <td>~ 590&ndash;560 nm</td>
      <td>~ 510&ndash;540 THz</td>
    </tr>
    <tr style="background: green">
      <th scope="row">Green</th>
      <td>~ 560&ndash;520 nm</td>
      <td>~ 540&ndash;580 THz</td>
    </tr>
    <tr style="background: blue">
      <th scope="row">Blue</th>
      <td>~ 520&ndash;490 nm</td>
      <td>~ 580&ndash;610 THz</td>
    </tr>
    <tr style="background: indigo">
      <th scope="row">Indigo</th>
      <td>~ 490&ndash;450 nm</td>
      <td>~ 610&ndash;670 THz</td>
    </tr>
    <tr style="background: violet">
      <th scope="row">Violet</th>
      <td>~ 450&ndash;400 nm</td>
      <td>~ 670&ndash;750 THz</td>
    </tr>
  </tbody>
</table>
</body>
</html>
points
Submitted by Roy
almost 9 years