In this section, we will learn how we can create tables in an HTML document.
HTML for a Table
Using HTML, we can create tables on pages as well! To do this, we use the <table> element.
The <table> element itself is just a container of the items that we want to put on the table. But in order to create the rows and columns of the target table, we need more elements than just the <table>
So let’s go and first see the syntax of creating a table in HTML and after that, we will explain the elements that are used in the process of creating a table.
HTML How to Create Table?
This is how we can create a table in HTML:
<table> <tr> <th> cell content</th> <th> cell content</th> <th> cell content</th> </tr> <tr> <td> cell content</td> <td> cell content</td> <td> cell content</td> </tr> </table>
`<table>`: this is the container of our table. First and foremost, when we want to create a table in HTML, we first start with the <table> element. So the body of the <table> element becomes the area where we define the rows and columns (and cell content) of the table.
`<tr>`: the <tr> element stands for table row and each of these elements we put in the body of a <table>, represents one row of the table. For example, if we put 3 <tr> </tr> element on a table, that means the table will have 3 rows then.
`<th>`: the <th> element stands for table header and it represents a cell on the table row that we’ve used this element in. For example, if there’s a <tr> element and we used the <th> in it for 3 times, that means the target <tr> element (table row) will have three cells in it. The body of the <th> element is the actual place we put content that will appear in the cells of the table. Also note that any content we put in the body of the <th> element will appear on a bold face.
`<td>`: This element stands for Table Data and just like the <th> element, we add this one inside the body of a <tr> element and each one of them represents a cell in the target table row! For example, if we put 2 of them in a <tr> element, that means the target row has 2 cells in it. Just like the <th> element, the body of the <td> is the place where we put the actual data and that will appear as the content within the cells of the target table.
Note: the difference between the <td> and <th> elements is in their semantics! The <th> mainly used when we want to set the content of the headers on a table. On the other hand, the <td> element is used when we want to put the actual data into the table cells.
Example: creating a table in HTML
See the Pen creating a table in HTML by Omid Dehghan (@odchan1) on CodePen.
HTML Table Merge Cell
By default, when creating a table in HTML, the cells are separated from each other (There’s a small gap between each cell in the table).
First, let’s see this gap in the example below and then we will explain what to do to get rid of this gap.
Example: HTML table with space between cells
See the Pen HTML table with space between cells by Omid Dehghan (@odchan1) on CodePen.
As you can see, there’s a space between each cell of this table.
But, if we don’t want this space, CSS has provided a property called `border-collapse` and if we set the value `collapse` for this property, then the entire gaps between the cells of the table will be gone and they will attach to each other.
Example: merge cells in HTML table
See the Pen merge cells in HTML table by Omid Dehghan (@odchan1) on CodePen.
HTML rowspan Attribute
There’s an attribute called `rowspan` by which we can increase the height of a cell in a table.
For example, let’s say you have a table with 5 rows. Now, you want to make one of the cells to take a space of three rows height! This is where we can use the rowspan attribute. Simply put, the value 3 as the argument of this attribute, and its height becomes equal to the height of 3 rows of the table.
Note: when setting a value like 3 for the value of this attribute, if the target table has 5 rows, then we are left with only 2 cells to add right below or above the cell that already took 3 space off the table! Basically, the height of a table affects the number of cells we can put in the column that has the cell with the rowspan attribute. In short, the sum of the value we set for the rowspan attribute and the number of cells in the target column should not surpass the number of rows available in that table.
Example: using rowspan attribute in HTML
See the Pen using rowspan attribute in HTML by Omid Dehghan (@odchan1) on CodePen.
HTML colspan Attribute
The colspan attribute is used to specify the number of columns that a table cell can take! By default, each cell takes only one column of space, but using this attribute, we can increase this space!
For example, if we set the value 2 for this attribute, it means the target cell’s width can become wide enough to take 2 columns of the target table!
Note: just like the rowspan attribute, we can’t put a value for this attribute that surpasses the available columns of the target table!
For example, if you have 5 columns in a table and the target cell is created on the first column, then you can put the number 5 as the argument of this attribute which means the cell’s width will be wide enough to take on the entire available columns.
Example: using colspan attribute in HTML
See the Pen using colspan attribute in HTML by Omid Dehghan (@odchan1) on CodePen.
HTML Table Within Table
The body of a <td> element is the place where you can put any type of content! That means an image, a video or even another table!
Let’s create a table within the body of a <td> element and see how it goes:
Example: HTML table inside a table
See the Pen HTML table inside a table by Omid Dehghan (@odchan1) on CodePen.
