Advanced Table Attributes in HTML: rowspan, scope, valign, width part 5 (rowspan, scope, valign, width)
☰Fullscreen
Table of Content:
- The td and th Elements
- The rowspan Attribute
- Html code
- Live Preview
- html code
- Live Preview
- The scope Attribute
- html code
- Live Preview
- html code
- Live Preview
- The valign Attribute
- html code
- Live Preview
- The width Attribute
- html code
- Live Preview
- Stay Ahead of the Curve! Check out these trending topics and sharpen your skills.
The td and th Elements
The <td> and <th> Elements Represent Table Cells.
Remember By default, the contents of a <th> element are usually displayed in a bold font, horizontally aligned in the center of the cell. The content of a <td> element, meanwhile, will usually be displayed left - aligned and not in bold (unless otherwise indicated by CSS or another element).
The rowspan Attribute
The purpose of the HTML rowspan attribute is to define the number of rows spanned by an individual table cell. The value of the attribute being the number of rows the cell stretches across.
<td rowspan = "2" >
Html code
<span class="pln"> </span><span class="tag"><table</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"300"</span><span class="pln"> </span><span class="atn">border</span><span class="pun">=</span><span class="atv">"2"</span><span class="pln"> </span><span class="atn">cellpadding</span><span class="pun">=</span><span class="atv">"3"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td></span><span class="pln"> </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">rowspan</span><span class="pun">=</span><span class="atv">"2"</span><span class="tag">></span><span class="pln">&nbsp;</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td></span><span class="pln">&nbsp;</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td></span><span class="pln">&nbsp;</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td></span><span class="pln">&nbsp;</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"></table></span><span class="pln"> </span>
Live Preview
<th rowspan="3">
html code
<span class="pln"> </span><span class="tag"><table></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><th></span><span class="pln">Month</span><span class="tag"></th></span><span class="pln"> </span><span class="tag"><th></span><span class="pln">Earning</span><span class="tag"></th></span><span class="pln"> </span><span class="tag"><th</span><span class="pln"> </span><span class="atn">rowspan</span><span class="pun">=</span><span class="atv">"3"</span><span class="tag">></span><span class="pln">Savings for holiday!</span><span class="tag"></th></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td></span><span class="pln">January</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td></span><span class="pln">$100</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td></span><span class="pln">February</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td></span><span class="pln">$80</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"></table></span><span class="pln"> </span>
Live Preview
The scope Attribute
The purpose of the HTML scope attribute is to specify the scope for header cells of a table.
HTML scope attribute supports td and th elements. It can be used instead of the headers attribute in basic tables, but does not have much support.
scope = "range"
The objective of this technique is to associate header cells with data cells in complex tables using the scope attribute. The scope attribute may be used to clarify the scope of any cell used as a header. The scope identifies whether the cell is a header for a row, column, or group of rows or columns. The values row, col, rowgroup, and colgroup identify these possible scopes respectively.
The table that follows shows the possible values of the attribute:
| Value | Description |
|---|---|
| col | Defines that the associated cell is a header for a column. |
| row | Defines that the associated cell is a header for a row. |
| colgroup | Defines that the associated cell is a header for a column group(a group of columns created using the <col> or <colgroup> element ). |
| rowgroup | Defines that the associated cell is a header for a row group (a group of cells in a row created using the <thead> , <tbody> , or <tfoot> elements). |
html code
<span class="pln"> </span><span class="tag"><table</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"200"</span><span class="pln"> </span><span class="atn">border</span><span class="pun">=</span><span class="atv">"1"</span><span class="pln"> </span><span class="atn">cellpadding</span><span class="pun">=</span><span class="atv">"2"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><th</span><span class="pln"> </span><span class="atn">scope</span><span class="pun">=</span><span class="atv">"col"</span><span class="tag">></span><span class="pln">Student Code </span><span class="tag"></th></span><span class="pln"> </span><span class="tag"><th</span><span class="pln"> </span><span class="atn">scope</span><span class="pun">=</span><span class="atv">"col"</span><span class="tag">></span><span class="pln">Percentage of marks</span><span class="tag"></th></span><span class="pln"> </span><span class="tag"><th</span><span class="pln"> </span><span class="atn">scope</span><span class="pun">=</span><span class="atv">"col"</span><span class="tag">></span><span class="pln">Grade</span><span class="tag"></th></span><span class="pln"> </span><span class="tag"><th</span><span class="pln"> </span><span class="atn">scope</span><span class="pun">=</span><span class="atv">"col"</span><span class="tag">></span><span class="pln">Remarks</span><span class="tag"></th></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"><td></span><span class="pln">S001</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td></span><span class="pln">92</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td></span><span class="pln">A+</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td></span><span class="pln">Excellent</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"><td></span><span class="pln">S002</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td></span><span class="pln">76</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td></span><span class="pln">B+</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td></span><span class="pln">Good</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"></table></span><span class="pln"> </span>
Live Preview
html code
In the following example, column #1 contains serial numbers for rows in the table and the second column contains the key value for the row.
The cells in the second column may then use scope="row". The cells in the first row too
are marked up with td and use scope="col".
<span class="pln"> </span><span class="tag"><table</span><span class="pln"> </span><span class="atn">border</span><span class="pun">=</span><span class="atv">"1"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><caption></span><span class="pln">Contact Information</span><span class="tag"></caption></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td></td></span><span class="pln"> </span><span class="tag"><th</span><span class="pln"> </span><span class="atn">scope</span><span class="pun">=</span><span class="atv">"col"</span><span class="tag">></span><span class="pln">Name</span><span class="tag"></th></span><span class="pln"> </span><span class="tag"><th</span><span class="pln"> </span><span class="atn">scope</span><span class="pun">=</span><span class="atv">"col"</span><span class="tag">></span><span class="pln">Phone#</span><span class="tag"></th></span><span class="pln"> </span><span class="tag"><th</span><span class="pln"> </span><span class="atn">scope</span><span class="pun">=</span><span class="atv">"col"</span><span class="tag">></span><span class="pln">Fax#</span><span class="tag"></th></span><span class="pln"> </span><span class="tag"><th</span><span class="pln"> </span><span class="atn">scope</span><span class="pun">=</span><span class="atv">"col"</span><span class="tag">></span><span class="pln">City</span><span class="tag"></th></span><span class="pln"> </span><span class="tag"></tr><tr></span><span class="pln"> </span><span class="tag"><td></span><span class="pln">1.</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><th</span><span class="pln"> </span><span class="atn">scope</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">></span><span class="pln">Joel Garner</span><span class="tag"></th></span><span class="pln"> </span><span class="tag"><td></span><span class="pln">412-212-5421</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td></span><span class="pln">412-212-5400</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td></span><span class="pln">Pittsburgh</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr><tr></span><span class="pln"> </span><span class="tag"><td></span><span class="pln">2.</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><th</span><span class="pln"> </span><span class="atn">scope</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">></span><span class="pln">Clive Lloyd</span><span class="tag"></th></span><span class="pln"> </span><span class="tag"><td></span><span class="pln">410-306-1420</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td></span><span class="pln">410-306-5400</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td></span><span class="pln">Baltimore</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr><tr></span><span class="pln"> </span><span class="tag"><td></span><span class="pln">3.</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><th</span><span class="pln"> </span><span class="atn">scope</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">></span><span class="pln">Gordon Greenidge</span><span class="tag"></th></span><span class="pln"> </span><span class="tag"><td></span><span class="pln">281-564-6720</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td></span><span class="pln">281-511-6600</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td></span><span class="pln">Houston</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"></table></span><span class="pln"> </span>
Live Preview
The valign Attribute
The purpose of the HTML valign attribute is to define the vertical alignment of the content of a table cell.
Possible values are top, middle, bottom, and baseline, each of which was discussed earlier in the chapter in the subsection entitled "The valign Attribute" within the section "The <tr> Element Contains Table Rows."
valign = "top"
| Value | Description |
|---|---|
| top | Sets the vertical alignment of cell content top. |
| middle | Sets the vertical alignment of cell content center. |
| bottom | Sets the vertical alignment of cell content bottom. |
| baseline | If set, the first text line occurs on a baseline common to all cells in the row. |
html code
<span class="pln"> </span><span class="tag"><table</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"200"</span><span class="pln"> </span><span class="atn">border</span><span class="pun">=</span><span class="atv">"1"</span><span class="pln"> </span><span class="atn">cellpadding</span><span class="pun">=</span><span class="atv">"2"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><th</span><span class="pln"> </span><span class="atn">valign</span><span class="pun">=</span><span class="atv">"middle"</span><span class="pln"> </span><span class="tag">></span><span class="pln">Student Code </span><span class="tag"></th></span><span class="pln"> </span><span class="tag"><th</span><span class="pln"> </span><span class="atn">valign</span><span class="pun">=</span><span class="atv">"middle"</span><span class="tag">></span><span class="pln">Percentage of marks</span><span class="tag"></th></span><span class="pln"> </span><span class="tag"><th</span><span class="pln"> </span><span class="atn">valign</span><span class="pun">=</span><span class="atv">"middle"</span><span class="tag">></span><span class="pln">Grade</span><span class="tag"></th></span><span class="pln"> </span><span class="tag"><th</span><span class="pln"> </span><span class="atn">valign</span><span class="pun">=</span><span class="atv">"middle"</span><span class="tag">></span><span class="pln">Remarks</span><span class="tag"></th></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">valign</span><span class="pun">=</span><span class="atv">"baseline"</span><span class="tag">></span><span class="pln">S001</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">valign</span><span class="pun">=</span><span class="atv">"baseline"</span><span class="tag">></span><span class="pln">92</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">valign</span><span class="pun">=</span><span class="atv">"baseline"</span><span class="tag">></span><span class="pln">A+</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">valign</span><span class="pun">=</span><span class="atv">"baseline"</span><span class="tag">></span><span class="pln">Excellent</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">valign</span><span class="pun">=</span><span class="atv">"baseline"</span><span class="tag">></span><span class="pln">S002</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">valign</span><span class="pun">=</span><span class="atv">"baseline"</span><span class="tag">></span><span class="pln">76</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">valign</span><span class="pun">=</span><span class="atv">"baseline"</span><span class="tag">></span><span class="pln">B+</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">valign</span><span class="pun">=</span><span class="atv">"baseline"</span><span class="tag">></span><span class="pln">Good</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"></table></span><span class="pln"> </span>
Live Preview
The width Attribute
width= "159px"
html code
<span class="pln"> </span><span class="tag"><table</span><span class="pln"> </span><span class="atn">border</span><span class="pun">=</span><span class="atv">"1px"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><tbody></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="pln"> </span><span class="atv">"159px"</span><span class="tag">></span><span class="pln">Name</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="pln"> </span><span class="atv">"159px"</span><span class="tag">></span><span class="pln">Roll</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="pln"> </span><span class="atv">"209px"</span><span class="tag">></span><span class="pln">Rambo</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="pln"> </span><span class="atv">"159px"</span><span class="tag">></span><span class="pln">CSE13421</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="pln"> </span><span class="atv">"159px"</span><span class="tag">></span><span class="pln">Rahim</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="pln"> </span><span class="atv">"159px"</span><span class="tag">></span><span class="pln">CSE14421</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"></tbody></span><span class="pln"> </span><span class="tag"></table></span><span class="pln"> </span>
Live Preview
No Questions Data Available.
No Program Data.