HTML table spans a row across rows for multiple columns and one row for multiple rows usage

Source: Internet
Author: User

HTML Table Code General people will write, nothing but the use of th, TR, TD, the Novice webmaster network to say the table code upgrade, table code across rows across columns, a row of multiple columns or a column of the use of multiple rows:

Cross-row, row-by-column, or one-column-by-row code that is used primarily for multiple rows is and is used across multiple colspan rowspan columns when used colspan across multiple rows rowspan . For example, a row across 2 columns, you can write colspan="2" , well, novice webmaster network Take the instance to speak it:

Table code line spans 2 columns, right across 2 rows

12345678910 <table Border="1"> <tr> <td colspan="2">AAA</TD> </tr> <tr> <TD>BBB</TD> <TD>CCC</TD> </tr> </table> //table row across 2 columns

The effect is as follows:

Aaa
Bbb Ccc

Code description principle: The HTML code First is a line of reading, first read the 1th line, hit colspan="2" , it will pre-Occupy 2 columns of the position. Then read the 2nd line, read the 1th column first, and then read the 2nd column.

Table code one column spans 2 rows

12345678910 <table Border="1"> <tr> <TD>AAA</TD> <td RowSpan="2">bbb</TD> </tr> <tr> <TD>CCC</TD> </tr> </table> //Table one column across 2 lines of code

The effect is as follows:

Aaa Bbb
Ccc

Code description principle: HTML code line to read, first read the 1th row 1th column, after reading the 2nd column, hit rowspan= "2", reserved 2 rows of position, and then read the 2nd row 1th column.

Table code line spans 2 columns, left across 2 rows

12345678910 <table> <tr> <td RowSpan="2">AAA</TD> <TD>BBB</TD> </tr> <tr> <TD>CCC</TD> </tr> </table> //table column spans 2 rows

The effect is as follows:

Aaa Bbb
Ccc
Complex combination of cross-row cross-columns

12345678910111213141516 <table Border="1"> <tr> <td RowSpan="2">AAA</TD> <TD>BBB</TD> <TD>CCC</TD> </tr> <tr> <TD>DDD</TD> <td>eee</TD> </tr> <tr> <TD>FFF</TD> <td colspan="2">GGG</TD> </tr> </table> //Table multiple-row multi-column complex combination

The effect is as follows:

Aaa Bbb Ccc
Ddd Eee
Fff Ggg

HTML table spans a row across rows for multiple columns and one row for multiple rows usage

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.