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).
<td colspan=”3”> – this cell stretches through three columns (in one row).
<td rowspan=”2”> – this cell stretches through two rows (in one column).
You have to create a table with 6 rows and 2 columns.
h3 heading: Job postings containing top languages
First table heading: Language
Second table heading: 2017
Third table heading: 2018
Second column: 68k, 41k, 40k, 33k, 28k, 13k, 17k
Third column: 62k, 46k, 38k, 31k, 27k, 14k, 14k