HTML tutorial

Tables

The <table> element represents a two-dimensional table. Other main elements thats related with table:

  • <tr> - row a table
  • <th> - header cell
  • <td> - ordinary cell
code result
<table class="table-bordered">   
<tr>
  <th colspan="2">the table header</th>
</tr>
<tr>
  <td>column 1</td>
  <td>column 2</td>
</tr>
</table>
the table header
column 1 column 2

cells

Cells define by <th> and <td> elements. First for headers, second for data.

attibute description
rowspan

A non-negative integer value that indicates for how many rows the cell extends. Default value is 1. 0 extends until the end of the table section, that the cell belongs to. Maximum value is 65534

colspan

A non-negative integer value that indicates for how many columns the cell extends. Default value is 1. Values higher than 1000 will be considered as incorrect and will be set to the default value

scope

Used with <th> element. Possible values:

  • row - header relates to all cells of the row it belongs to
  • col - header relates to all cells of the column it belongs to
  • rowgroup - header belongs to a rowgroup and relates to all of its cells. These cells can be placed to the right or the left of the header, depending on the value of the dir attribute in the <table> element
  • colgroup - header belongs to a colgroup and relates to all of its cells.
  • auto - default value

sections

Sections provide information, that can be used for rendering table on screen or for printing.

Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Or printing header and footer at the top and bottom of each page.

You must use the elements in the same order or skip the element:

  • <caption> defines a caption of table
  • <colgroup> defines a group of columns within a table
  • <thead> defines a set of rows defining the head of the table
  • <tbody> defines main content of table
  • <tfoot> defines a footer content of table
code result 
/* css */
.cars {
 background-color: #d7d9f2;
}

.motorcycle {
 background-color: #ffe8d4;
}
<!-- html -->
<table>
    <caption>my caption</caption>
    <colgroup>
        <col>
        <col span="2" class="cars">
        <col span="2" class="motorcycle">
    </colgroup>
    <tr>
        <td> </td>
        <th scope="col">BMV</th>
        <th scope="col">Volkswagen</th>
        <th scope="col">HARLEY</th>
        <th scope="col">BOMBARDIER</th>
    </tr>
    <tr>
        <th scope="row">price</th>
        <td>2k$</td>
        <td>1k$</td>
        <td>2k$</td>
        <td>1k$</td>
    </tr>
</table>
my caption
  BMV Volkswagen HARLEY BOMBARDIER
price 2k$ 1k$ 2k$ 1k$