Tables
Tables are a way to represent data that have correlation when arranged in rows and columns. They are useful since we can infer info easily from them. We use the <table> element in order to describe tables in HTML. There are many elements that are related to tables.
Learning the various elements for constructing a table is the easy part. Using them to construct a complex table with many rows and columns of data can become tedious. Unless you are using any of the advanced editors like Atom or Brackets that have syntax highlighting and automatic code completion features, it will be difficult to construct large tables. So we highly recommend using one of these editors if your sites will have large tables.
Making a simple table
All the table’s data should be enclosed within the <table> element. The <tr> element represents a single row in a table. The <td> element represents a single cell of the table. The <td> elements are enclosed within a <tr> element. A table usually is made up of multiple <tr> elements. Since each row will have the same number of <td> elements, the browser can infer the number of columns automatically.
<table> <tr> <td>Luke Skywalker</td> <td>Han Solo</td> <td>Leia Organa</td> </tr> <tr> <td>Mark Hamill</td> <td>Harrison Ford</td> <td>Carrie Fisher</td> </tr> </table>
<th> element
Usually, tables have header cells that describe either a row or column. By default, the browsers display header content as bold and centered text. We can use the <th> element instead of <td> element to represent header cells.
<table> <tr> <th>Characters</th> <td>Luke Skywalker</td> <td>Han Solo</td> <td>Leia Organa</td> </tr> <tr> <th>Actors</th> <td>Mark Hamill</td> <td>Harrison Ford</td> <td>Carrie Fisher</td> </tr> </table>
colspan and rowspan attributes
Sometimes we would want a cell to cover more than one row or column. We can use the colspan and rowspan attributes for this purpose. The colspan attribute is used when a cell needs to be more than one column wide. It accepts a number as its value which indicates the number of columns that cell covers. Similarly, the rowspan attribute is used to cover multiple rows.
<table> <tr> <td>Alden Ehrenreich</td> <td rowspan="2">Han Solo</td> </tr> <tr> <td>Harrison Ford</td> </tr> </table> <table> <tr> <td colspan="2">Harrison Ford</td> </tr> <tr> <td>Han Solo</td> <td>Indiana Jones</td> </tr> </table>
col and colgroup elements
When we want to style a particular row using CSS, we can easily do it by styling the particular <tr> element. But this method cannot be used for columns since they are implied. One way would be to style all the cells under a column with same styles. This would do the job, but this method is not efficient. It becomes tedious when there are thousands of cells under a single column.
There is a simpler and more efficient way for styling columns by using the <col> and <colgroup> elements. A <colgoup> element is used before all the <tr> elements. It has a number of <col> elements equal to the number of columns in the table. Each col element represents a column in the table. Any style applied to a <col> element will be applied to the corresponding column in the table. If a column spans the size of multiple columns or if the same set of styles needs to be applied for adjacent columns then the span attribute is used. The span attributes specify the number of columns covered by the <col> element.
<table> <colgroup> <col style="background-color:black;color:white"> <col> <col> <col> </colgroup> <tr> <th>Characters</th> <td>Luke Skywalker</td> <td>Han Solo</td> <td>Leia Organa</td> </tr> <tr> <th>Actors</th> <td>Mark Hamill</td> <td>Harrison Ford</td> <td>Carrie Fisher</td> </tr> </table>