HTML Table colspan attribute

 The function of the HTML Table colspan attribute is to make the table field (td) span multiple columns (columns), the effect is similar to the effect of "merging cells" in Microsoft word or OpenOffice writer, colspan can only be used in the td tag of the Table , It is invalid for other tags. The colspan attribute is the basic attribute of HTML tables . All mainstream browsers support the effect of this attribute. The rowspan attribute corresponds to colspan .

HTML Table colspan attribute syntax

<td colspan="Number of columns to span">

colspan grammar "to the number of columns across the" digital across most not exceed the table maximum of columns, such as the table itself is only five, then colspan not be greater than 5, although colspan greater than the number of all fields not happen , At most, it spans to the most columns, but some browsers may misjudge and cause the table to mess up, so it should be avoided.

HTML Table colspan attribute example

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

<table border="1" cellpadding="5" style= "border:2px #FFB326 solid;text-align:center;">
<tr><td colspan="3" >colspan field used</td></tr>
<tr><td>table field </td><td>Table fields</td><td>Table fields</td></tr>
</table>

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

We have prepared three examples of tables using colspan. In the td tag of the first row of the first table , " colspan="2" " is used to make the first row span two fields. The same concept is used in the second In the table , let the first row span three fields, the third table is to modify the second row of fields, HTML colspan can be used in different rows. The beginning part of the grammar style in the example is the design grammar of CSS , which is only used to make the example clearer, such as adding the color of the border and making the text medium. If you are interested, you can read these introductions.

• CSS border
• CSS text-align horizontal alignment

➤The table in each example has cellpadding. What is it for? This article will help you answer: HTML Table cellpadding attribute .
➤ If you want to make the effect of the merger is vertical field, that is, form multiple lines merge, please see: HTML rowspan attribute the Table .