HTML COLSPAN - CSVeda

Trang chủ » Html Th Span Multiple Columns » HTML COLSPAN - CSVeda

Có thể bạn quan tâm

Skip to content Home > HTML COLSPAN HTML COLSPAN

In HTML tables sometimes you may need to combine columns to give a common heading for a set of columns. The sub columns under a combined column can be given different sub column names. For example under a common heading “Marks”,  sub columns of five different subjects can be created to present data in an understandable form. The sub columns headings can be different subject names. To create such a table HTML COLSPAN attribute can be used. COLSPAN means columns span.

HTML COLSPAN attribute is used in Table TH and Table TD tags. This attribute is used to span or extend over multiple columns.

Syntax COLSPAN Attribute

HTML COLSPAN is given in the TH tag or TD tag as per the need of a table design. The COLSPAN attribute makes a column span multiple columns so the attribute must be given the count of columns to be spanned.

<TH COLSPAN=count> Heading string</TH> <TD COLSPAN =count> Cell Data values </TD>

Features of COLSPAN

  • HTML COLSPAN is an attribute that accepts a numeric value. This value is the count of the columns to be spanned or extended by a single common column.
  • COLSPAN attribute can be used in Header tag <TH> and Table Cell tag <TD>. It must always be included in the opening tag. The closing tag will not be altered.
  • The combined columns will use other attributes defined at Table level or Row level. These include background color, font style etc.
  • When you apply HTML COLSPAN in <TH> or <TD> tag with count of columns to be spanned the actual number of columns should be lesser by (n-1) spanned columns. For example if a table has total 7 columns and you want to span four columns, then the row containing COLSPAN attribute must have four columns. Three columns will be normal columns and one column spanned over four columns.

Example of HTML COLSPAN Attribute

<TITLE> Welcome to CSVeda.com </TITLE> <HTML> <BODY > <H3 ALIGN="CENTER">Using TABLES in Websites</H3> <TABLE WIDTH="50%" border=1 align="center" > <TR> <TH >Roll No.</TH> <TH >Name</TH> <TH >Class</TH> <TH COLSPAN=4>Marks</TH> </TR> <TR > <TD colspan=3></TD> <TD>Maths</TD> <TD>French</TD> <TD>Science</TD> <TD>Total</TD> </TR> <TR > <TD>203</TD> <TD>Bell Staines</TD> <TD>Masters in Business Admin</TD> <TD>10</TD> <TD>9</TD> <TD>8</TD> <TD>27</TD> </TR> <TR> <TD>204</TD> <TD>Clesent Blert</TD> <TD>Diploma in Administration</TD> <TD>9</TD> <TD>9</TD> <TD>8</TD> <TD>26</TD> </TR> </TABLE> </BODY> </HTML>

Output

HTML COLSPAN
Primary Sidebar

Từ khóa » Html Th Span Multiple Columns