Lesson 4 - Tables in HTML

In the previous exercise, Solved tasks for HTML and CSS lessons 1-3, we've practiced our knowledge from previous lessons.

In the previous lesson, Solved tasks for HTML and CSS lessons 1-3, we learned how to insert images and links into websites. Today, we're going to create tables and lists in HTML. Both of those could be seen as containers for other contents. We use them to align elements, and through them, we achieve clarity and a unified design.

Tables

Tables can be very useful when designing websites. They allow us to add elements into their cells (which are pretty well aligned). Unlike paragraphs, which are always stacked under each other, we can insert texts into table cells one next to the other. Aside from text, we can also insert images or pretty much any other element into table cells. This will prove to be useful when displaying results, parameters, or statistics. For example, on ICT.social, we use tables to list lessons and applications.

Our first table

Let's create our first, simple table. Create a new HTML file, and add the doctype, the head, and...you know the rest Once you have the basic structure of it set up, add a table with 2 rows and 3 columns. We'll omit the table header and footer for now.

<table border="1">
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
    </tr>
    <tr>
        <td>Cell 4</td>
        <td>Cell 5</td>
        <td>Cell 6</td>
    </tr>
</table>

The result will be the following:

We wrap the table with the paired <table> tag. We wrap each row with the <tr> tag (stands for Table Row). Each cell is then wrapped in the <td> tag (stands for table data).

Since we do have future lessons devoted to web page styling and design, all we'll reveal this time around is the border attribute. The "border" attribute specifies the thickness of the table border. The default value is 0, meaning disabled. We set it to 1px in the code above.

Tables with a head

We could use a more complex structure for a table, sort of like the HTML structure. We could incorporate a "head" in using the <thead> tag and a body using the <tbody> tag. The table head would be the first row with column labels, describing what values in each column mean.

We could also completely omit the head, and therefore, not have to wrap the body in tbody. The "thead" tag can be followed by tfoot, which contains the table footer of the table. We use the <tr> tag in the header as well, but instead of <td> we use <th> (stands for Table Header cell).

The best way to understand what exactly is going on is to see it in action! Let's create a table of several laptops and their parameters. I've prepared laptop icons for you, download them bellow:

We'll replace our simple table with the following code to make it more complex:

<table border="1">
  <thead>
    <tr>
        <th>Preview</th>
        <th>Type</th>
        <th>Processor</th>
        <th>Graphic card</th>
        <th>In stock</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td><img src="images/nb1.png" alt="Laptop"></td>
        <td>AB8AC9</td>
        <td>Intel Atom</td>
        <td>Nvidia</td>
        <td>Yes</td>
    </tr>
    <tr>
        <td><img src="images/nb2.png" alt="Laptop"></td>
        <td>GS8DGF</td>
        <td>AMD</td>
        <td>ATI</td>
        <td>Yes</td>
    </tr>
    <tr>
        <td><img src="images/nb3.png" alt="Laptop"></td>
        <td>KG1862A</td>
        <td>Unspecified</td>
        <td>Unspecified</td>
        <td>No</td>
    </tr>
  </tbody>
</table>

The result:

As we can see, the table has a head, the text in it is bold and centered, and that's pretty much it.

Merging cells

Neighboring cells can be merged. If we merge cells in a row, we write the cell only once and give the colspan attribute to it. Its value will be the number of cells it merges. In the table above, we can merge cells with the "Unspecified" value. So the colspan value of the cell will be 2 (we're merging two cells in a row) and remove the second cell. Modify the last row's code to look like the following:

<tr>
    <td><img src="images/nb3.png" alt="Laptop"></td>
    <td>KG1862A</td>
    <td colspan="2">Unspecified</td>
    <td>No</td>
</tr>

And the result:

Similarly, we can merge cells in a column using the rowspan attribute which specifies the number of rows we are merging. Let's merge both of the cells with the "Yes" text as well. We'll remove the second cell and add the rowspan attribute of the first one to two. After you add all that, the first 2 rows will look as follows:

<tr>
    <td><img src="images/nb1.png" alt="Laptop"></td>
    <td>AB8AC9</td>
    <td>Intel Atom</td>
    <td>Nvidia</td>
    <td rowspan="2">Yes</td>
</tr>
<tr>
    <td><img src="images/nb2.png" alt="Laptop"></td>
    <td>GS8DGF</td>
    <td>AMD</td>
    <td>ATI</td>
</tr>

Visual representation of the final result:

That's all on tables for now. Today's code can be downloaded for free by clicking the attachment below. Further along, we will show you all how to style and align text in a table and how to specify cell size. As a matter of fact, there used to be special attributes for that, but they have all been deprecated (I won't mention any of them, mainly, to avoid confusion). Nowadays, we use the CSS language for styling, which we will get to very soon.

*Back in the day, tables were also used for creating website layouts (dividing a website up into a navigation area, a logo, and a content area). Although it might seem useful with static websites, it's very inappropriate from the "HTML adds meaning to things point of view". I didn't want to confuse you all by throwing advanced technical terms this early on in the course, but from now I'm going to use the term semantic.

Web semantic is all about the meaning of individual elements. Using a table to set the website layout is unsemantic. Mainly because even when the website is displayed properly, the table will contain values, not the entire website content. Remember the difference between the <strong> tag and the <b> tag? They both add the same look to text, but emphasizing text using the <b> tag is unsemantic because it does not increase text importance whatsoever. All it does is tell the browser to display the text using a bold font. On the other hand, strong tells the browser that: "The text included within the strong tag is important". Semantics is all about what things mean, not what they look like. Which is very important because semantic websites have many advantages over all of the others in search engines (which often leads to higher page views).*

In the next lesson, Lists in HTML and a table example, we're going to introduce you to lists and add full navigation to our website.

Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.