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.
Download
By downloading the following file, you agree to the license terms
Downloaded 105x (17.42 kB)
Application includes source codes in language HTML