RowSpan and colspan usage:
Tables are a great tool for organizing your data, with two properties rowspan and colspan in the table, which is very important to combine the effects of the cells with these two properties, which are described in the code examples below.
One. Colspan properties:
This property enables horizontal cross-column cell merge effects.
To make it easier to understand, you can start with a property word, colspan is a composite word: column +span (span).
The property value is a number that represents a merged cell across several columns.
The code example is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.51texiao.cn/" /><title>Ant Tribe</title></Head><Body><TableBorder= "1"> <TR> <TDcolspan= "2">Ant title</TD> </TR> <TR> <TD>Ant Tribe</TD> <TD>Free Tutorials</TD> </TR></Table></Body></HTML>
The above code can merge cells across two columns, so the first row of two cells is merged into one cell.
Two. RowSpan Properties:
This property enables you to merge effects across rows of cells.
The same rowspan is a synthetic word: row (row) +span (span).
The property value is a number that represents a merged cell across several columns.
The code example is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.51texiao.cn/" /><title>Ant Tribe</title><Body><TableBorder= "1"> <TR> <TDrowspan= "2">Ant title</TD> <TD>Ant Tribe</TD> </TR> <TR> <TD>Free Tutorials</TD> </TR></Table></Body></HTML>
The above code can merge cells across two rows, so the first cell of the first row and the first cell of the second row implement the merge effect.
The original address is: http://www.51texiao.cn/HTML5jiaocheng/2015/0612/4021.html
The most original address is: http://www.softwhy.com/
RowSpan and colspan usage explanation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
