Lessons menu
HTML - basic - Lesson nr. 5

What this lesson is about?

In this lesson we will learn how to insert a table in an HTML document. Without formatting our tables, they will appear without borders. The styling of the table borders we will cover later, in the CSS chapter.


New tags of this lesson:

<table> </table> - we mark the beginning and the end of the table.
<tr> </tr> - we mark the beginning and the end of a row. It is the abbreviation for table row.
<td> </td> - we include in this tags the content of a cell. It is the abbreviation for table data.
<th> </th> - it includes the content of header cells. It is the abbreviation for table header.
<caption> </caption> - with these tags we can add title to our table.

Example for table:

Tha usage of the tags related to tables:
  • The content of the cells are contained directly by the <td> and <th> tags. The <table> and <tr> contain other tags, they have no direct “contact” with the content.
  • The tag <caption> comes directly after the <table> tag, but can be left out.
  • The <th> tag is also not needed necessarily.

    Merging cells
    The attributes/properties colspan and rowspan are used to merge cells. These attributes should be inserted in the <td> or <th> tags (like the type attribute in the lists).
    <td colspan=”3”> – this cell stretches through three columns (in one row).
    <td rowspan=”2”> – this cell stretches through two rows (in one column).
1. Edit tips.html and after the first h2 heading add another h3 heading with the text My timetable. After this, create a table with two columns and four rows. In the first column’s cells write the following time intervals: 8-9, 9-14, 14-15 and 15-17. In the second column’s cells write the following texts: Meeting with the team, Working on projects, Lunch, Working on projects.
View the result
2. Add the title Work schedule to the pervious table.
View the result
3. Edit the aspects.html file and format it’s content according to the HTML comments left in.
You have to create a table with 6 rows and 2 columns.
View the result
4. Edit toplangs.html and add an h3 heading and a table with 8 rows and 3 columns with the next data:
h3 heading: Job postings containing top languages
First table heading: Language
Second table heading: 2017
Third table heading: 2018
First column: Java, Python, JavaScript, C++, C#, PHP, Perl
Second column: 68k, 41k, 40k, 33k, 28k, 13k, 17k
Third column: 62k, 46k, 38k, 31k, 27k, 14k, 14k
View the result
1. What does <td> stand for?
2. Which of the following tags are necessary for a table?
3. To which HTML tag should be added the attribute named colspan?
4. How many cells are in the table below?
  <tr><th colspan="2">Colors</th></tr>
  <tr><td>Red</td><td rowspan="2">Green</td></tr>
Supplementary information
You can read more about this on the 
https://www.w3schools.com/html/html_tables.asp page.
Exclamation mark This site is using cookies. By continuing to browse the site, you accept their use! I accept