HTML - basic - Lesson nr. 5
Tables
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.
<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: 
- 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.
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).
Ex:
<td colspan=”3”> – this cell stretches through three columns (in one row).
<td rowspan=”2”> – this cell stretches through two rows (in one column).
Exercises
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
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
You have to create a table with 6 rows and 2 columns.
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
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
Questionnaire
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?
<table>
<tr><th colspan="2">Colors</th></tr>
<tr><td>Red</td><td rowspan="2">Green</td></tr>
<tr><td>Blue</td></tr>
</table>
<table>
<tr><th colspan="2">Colors</th></tr>
<tr><td>Red</td><td rowspan="2">Green</td></tr>
<tr><td>Blue</td></tr>
</table>
Supplementary information
You can read more about this on the
https://www.w3schools.com/html/html_tables.asp page.
https://www.w3schools.com/html/html_tables.asp page.
