HTML Table rowspan attribute

 The function of the HTML Table rowspan attribute is used to merge multiple rows. Rowspan can merge two rows of the table into one row, or multiple rows at a time. Its function is similar to the "vertical merge cell" in Microsoft word or OpenOffice writer. The effect of rowspan can make HTML tables have unlimited changes. The same as colspan , rowspan can only be used in the td tag of HTML tables , and has no effect in other places. All mainstream browsers support the effect of HTML Table rowspan attribute.

HTML table rowspan attribute syntax

<td rowspan="Number of rows to merge">

The parameter value "number of rows to be merged" of rowspan must be less than or equal to the number of rows in the same table. For example, if a table has only 5 rows, rowspan can only be rowspan="5" at most. The same HTML table can have many different fields using the rowspan attribute. Here are a few examples of tables that use rowspan.

HTML Table rowspan attribute example 1. Combine two rows on the left side of the table

<table border="1" cellpadding="5" style="border:2px #26FF26 solid;text-align:center;">
<tr><td rowspan="2" >Use rowspan field</td> <td>Table fields</td></tr>
<tr><td>Table fields</td></tr>
</table>

Rendering effect

Use rowspan field	Table field
	Table field

The focus of the example is that the "rowspan="2"" syntax is used in the <td> tag in the first row of the table, which means that the first column must be merged with two rows. In this case, the designer must remember to make the table have at least two The row exists, that is, there must be at least two sets of <tr> tags, and only one set of <td> tags is required in the second set of <tr> tags. Rowspan will automatically merge the two rows in the first column into one row. If the table If the number of row tags (<tr>) and column tags (<td>) is incorrect, rowspan will be wrong, so designers should calculate the number of rows and columns by themselves. If you are familiar with the design rules of HTML tables or basic CSS The grammar is not familiar yet, here are a few articles to read.

• HTML table
• CSS border
• CSS text-align horizontal alignment

Then we use rowspan to start merging for other columns.

HTML Table rowspan attribute example two, merge two rows in the middle of the table

<table border="1" cellpadding="5" style="border:2px #FFB326 solid;text-align:center;margin:15px 0px;">
<tr><td>table fields</td><td rowspan="2" >Use rowspan fields</td><td>table fields</td></tr>
<tr><td>table fields</td><td>table fields</td> td></tr>
</table>

Rendering effect

Table field	Use rowspan field	Table field
Table field		Table field

The difference between Example 2 and Example 1 is that this time the table has three columns. What we want to merge is the second column and merge two rows at a time, so rowspan="2" should be written in the column label of the second column (<td>) Inside. The second row (the second set of <tr> tags) only needs to have two rows (two sets of <td> tags), rowspan will automatically make the second column occupy two rows of space, which is equal to the two rows in the middle column Merged into one big line.

HTML Table rowspan attribute example 1. Combine two rows on the right side of the table

<table border="1" cellpadding="5" style="border:2px #00DBDB solid;text-align:center;">
<tr><td>table fields</td><td rowspan="2" >Use rowspan field</td></tr>
<tr><td>table field</td></tr>
</table>

Rendering effect

Table field	Use rowspan field
Table field

Example 3 and Example 1 are both two-column tables. This time we want to merge the right column, merge two rows at a time into one big row, so only the second one in the first row (the first set of <tr> tags) Use rowspan="2" in the column (<td>). Someone may want to ask, if the entire set of column labels with rowspan="2" in example three is rewritten in the second row? The answer is no. The attribute of rowspan is to merge from top to bottom. If it is written in the second line, rowspan will not automatically merge upwards.

HTML Table rowspan does not specifically limit the number of rows that can be merged at a time. If combined with the " HTML Table colspan Attributes ", the table can be designed to be ever-changing.