1. Simple Html5 Table

In Html5, <Table> tag will present the data as rows and columns. Suppose a table is having 5 rows and three columns, then the <table> tag contains five rows of data, with each row having 3 cells of data. In html, <tr> represents a Table Row which will be placed inside the <Table> tag. Each Table row may have one or more Table Data and Html represents it as <td>. In this example, we will see how to create a simple Html Table and then we will study Rowspan and Colspan attributes.

2. Creating a Simple Html5 Table

Let us create Html table. The below code shows the Table Tag:

The Table Tag contains two attributes. One is style and other one is border. The border attribute draws border on the table and 50% width tells, the browser will use its 50% of total width to render this table. The <Table> tag contains, three table rows. Means three <Tr> tags and each one represents a row in the table. Each table row has three table data tags <td>. The tag <th> denotes the header tag and in our example, we used the first row as a header row. When a browser renders the header row, it will present the data row in bold text so that user can clearly distinguish it from the normal data row. Row 2 and Row 3 are normal data rows formed using the <td> tags. Running this html is shown below:

3. Html5 Table’s Colspan Attribute

The colspan is the attribute of <td> which tells the table data spawns multiple columns. Now, look at the below example:

The first row of the table is a normal row which contains three Table Data tags. In the second row, colspan=”2” tells that the <td> tag expands to two columns. So, in that table row, we enclosed only two <td> tags. In the third row, we use colspan=”3” to state the Table Data <td> cell expands 3 columns. Hence, we have only one Table Data cell defined in that row. Running this example will produce the following result:

4. Html5 Table Rowspan Attribute

Like colspan, rowspan is also an attribute of the Table Data <td> tag. Now, let us look at the below code:

The rowspan attribute is tricky compared with the colspan. In the above example, we introduced rowspan=”3” in the third data cell of the first table row. You can see all three data cells present in that row. Since it is row spawn, the third cell in the first row expands to occupy the third cell in the second row and the third cell in the third row. In the second row, we are asking to expand the second data cell by 1 row via the attribute rowspan=”2”. The third row contains only one Table Data <td> tag as its other two data cells is merged with the previous rows. Means, 2nd cell is merged with the 2nd cell of the 2nd row and 3rd cell is merged with 3rd cells of second and first rows. Running this example will produce the below result:

Here, you can see how the third cell in the first row is expanding to occupy two rows. The yellow highlighted cell in the second row expands one row and occupied one cell (2nd one) in the third row. This is the reason we had only one <td> in the third row and two <td> tags in the second row.

5. Mixing Rowspan and ColSpan Atrributes

Now, let us look at the last example. The code is below:

In the above code, the second data cell in the second row uses both rowspan and colspan. The attribute colspan=”2” expands 2nd data cell to one more cell in the right. Then this result of two merged cells expands downward, consuming 2nd and 3rd cells in the third row. Running this html in browser will produce the following result:

6. Code Reference

006_TableExample.html

007_Colspan.html

008_RowSpan.html

009_RowSpanColSpan.html

• HTML5 List – Ordered , Unordered & Definition
• JavaScript 001 – Declare Variable

Categories: HTML5

Tags: <Table>, <td>, <tr>, Colspan, Rowspan

This site uses Akismet to reduce spam. Learn how your comment data is processed.