admin In HTML, table tags are used to create tables. These include:
<table> - table wrapper tag;
<tr> - table row (row) tag;
<td> - normal table cell tag;
<th> - table header cell tag;
<col> - table column tag;
<colgroup> - table columns group tag;
<thead> - tag of the table header;
<tbody> - tag of the main part of the table;
<tfoot> - tag of the table footer;
<caption> - table caption tag.Each of these tags has a separate page in our guide. You can go to it by clicking on the tag name.
Further we will consider practice of making HTML tables with example source code and description in Russian.
Simple HTML table
You need only 3 tags to create a simple HTML table: table, tr and td.
The table tag is the root container of your table. All contents of the table must be placed inside it.
Next, you need to define the rows and cells – the structure of the table.
In HTML tables, the tr row is the container for cells. The table columns are determined by the cell position: the first td cell inside a tr row will be in the first column, the second td cell in the second column, and so on.
The tbody tag is used to separate tables into footers (about it below) and the main part, as a wrap around the tr lines of the main part of the table. Its use is not necessary in simple tables, but some browsers and HTML editors add it automatically, so we’ll also use it in the examples below. If your table does not have a footer, you do not need to use the tbody tag.
HTML table headers
There are 2 types of cells in HTML tables. The tag defines a cell of the usual type. If a cell acts as a header, it is defined using the tag.
For clarity, the examples below will use specific situations where you can apply one or another feature of HTML tables.
Combining cells in an HTML table
In HTML tables it is possible to merge cells horizontally and vertically.
To merge horizontal cells use colspan=”x” attribute with or cell, where x is number of cells to merge.
To merge cells vertically use attribute rowspan=”x”, for or cell, where x is number of cells to merge.
You can merge cells horizontally and vertically simultaneously. To do this, use both colspan and rowspan attributes for the desired cell:
<td colspan="3" rowspan="2">Text</td>Please note that merging cells changes the number of elements in the tr tag. For example, if there are three columns with td cells in the table and we merge the first and the second cell, in total there will be two td elements inside the tr tag defining this line, the first of them will contain colspan=”2″ attribute.
