Creating Data Tables in HTML

Creating Data Tables in HTML
We create a table using the <table> tag. We then proceed by creating a table row with the <tr> tag. In the example above, we have 4 table rows. Its structure in HTML looks
like this:

<table>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>

In our above example table, we have 3 table cells within each table row. We also have two different types of table cells used in our table. One type is a table header cell, e.g.”Quantity Required”, and the other type is a table data cell, e.g. “6″. To create a table header cell, we use the <th> tag and to create a standard table data cell,
we use <td>.

For example:
<table>
<tr>
<th>Item</th>
<th>Cost Per Item</th>
<th>Quantity Required</th>
</tr>
<tr>
<td>Computer system</td>
<td>1000</td>
<td>2</td>
</tr>
<tr>
<td>Mixing Desk</td>
<td>2000</td>
<td>1</td>
</tr>
<tr>
<td>Comfy chairs</td>
<td>35</td>
<td>6</td>
</tr>
</table>

Item Cost Per Item Quantity Required
Computer system 1000 2
Mixing Desk 2000 1
Comfy chairs 35 6


Tables Are For Data, Not Layout
HTML tables are intended for displaying tabular data, such as the example above. However, in the days before CSS (Cascading Style Sheets - the language we will use to style our pages), web designers used HTML tables to take control of the layout of their displayed pages. For example, a huge table was created to fill the entire page body, with the site navigation section in one big table cell on the left and the site banner in a cell at the top, etc.
In those times, this was the only way to achieve the layout effects that designers wanted. However, CSS allows many more styling possibilities and is preferrable to using tables for layout for some very good reasons:

  • When the page content is split between different cells of an HTML table, it becomes harder for search engines to understand the flow of the document.
  • It also becomes harder for a screen reader (a browser that reads web pages, for users with poor eyesight) to follow the document flow.
  • It is harder to achieve a good layout in small-screen browsers, such as those on palm-top computers and mobile phones.
  • It is more confusing for the web designer to read their own code.
  • Tables usually require more code on syntax written than if we use a CSS stylesheet. This adds a little to the file sizes of our pages, meaning slightly longer downloading times for the pages and higher costs for the hosting of our website.
  • The tables approach fails to separate the style of the page from the content of the page. By forcing the page content into an HTML table, we limit the number of ways in which it can be displayed.
  • The HTML loses its power as being the markup language for the information in our document. Instead, it gets muddied by trying to also style that information.
  • In a nutshell, we lose the flexibility that separating style from content allows us. HTML is for marking up information, CSS is for styling that marked up information.
    This will become clearer once we start learning CSS styling.