![]() |
Definition and UsageThe An HTML table has two kinds of cells:
The text in The text in <td> elements are regular and left-aligned by default. Browser SupportAttributes
Global AttributesThe Event AttributesThe |
Example:
HTML
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Left-align content in th.
Example:
HTML
<table style="width:100%">
<tr>
<th style="text-align:left">Month</th>
<th style="text-align:left">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Add Background Color to th.
Example:
HTML
<table>
<tr>
<th style="background-color:#FF0000">Month</th>
<th style="background-color:#00FF00">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Add Specific Height to th.
Example:
HTML
<table>
<tr>
<th style="height:100px">Month</th>
<th style="height:100px">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Add Nowrap to th.
Example:
HTML
<table>
<tr>
<th>Month</th>
<th style="white-space:nowrap">My Savings for a new car</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Vertical-align content in th.
Example:
HTML
<table style="width:50%;">
<tr style="height:100px">
<th style="vertical-align:bottom">Month</th>
<th style="vertical-align:bottom">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Add a width i percent for ths.
Example:
HTML
<table style="width:100%">
<tr>
<th style="width:70%">Month</th>
<th style="width:30%">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Example:
HTML
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
<tr>
<td>John Doe</td>
<td>[email protected]</td>
<td>123-45-678</td>
</tr>
</table>
The caption element.
Example:
HTML
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Colspan and rowspan.
Example:
HTML
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th colspan="2">Phone</th>
</tr>
<tr>
<td>John Doe</td>
<td>[email protected]</td>
<td>123-45-678</td>
<td>212-00-546</td>
</tr>
</table>
Most browsers will display the <th>
element with the following default values.
Example:
HTML
<style>
th {
display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: center;
}
</style>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Use of the abbr attribute in an HTML table:
The abbr
attribute specifies a shorter version of the content in a header cell.
Note: The abbr
attribute has no visual effect in ordinary web browsers, but can be used by screen readers.
<th abbr="text">
Value | Description |
---|---|
text | A short description of the header cell content |
Example:
HTML
<table>
<tr>
<th abbr="Make">Toy manufacturer</th>
<th abbr="Model">Vehicle model</th>
</tr>
<tr>
<td>Bruder Toys</td>
<td>Cross Country Vehicle</td>
</tr>
<tr>
<td>Bruder Toys</td>
<td>DHL Lorry</td>
</tr>
</table>
It is An HTML table with a header cell that spans two columns.
The colspan
attribute defines the number of columns a header cell should span.
Note: Only Firefox supports colspan="0"
, which has a special meaning (look below in the "Attribute Values" table).
<th colspan="number">
Value | Description |
---|---|
number | Sets the number of columns a header cell should span. Note: colspan="0" tells the browser to span the cell to the last column of the column group (colgroup) |
Example:
HTML
<table>
<tr>
<th colspan="2">Monthly Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
It Specify the <th> element each header cell is related to.
The headers
attribute specifies one or more header cells a header cell is related to.
Note: The headers
attribute has no visual effect in ordinary web browsers, but can be used by screen readers.
<th headers="header_id">
Value | Description |
---|---|
header_id | Specifies a space-separated list of id's to one or more header cells the header cell is related to |
Example:
HTML
<table>
<tr>
<th id="name" colspan="2">Name</th>
</tr>
<tr>
<th headers="name">Firsname</th>
<th headers="name">Lastname</th>
</tr>
</table>
It is An HTML table with a header cell that spans three rows.
The rowspan
attribute defines the number of rows a header cell should span.
<th rowspan="number">
Value | Description |
---|---|
number | Sets the number of rows a header cell should span. Note: rowspan="0" tells the browser to span the cell to the last row of the table section (thead, tbody, or tfoot) |
Example:
HTML
<table>
<tr>
<th>Month</th>
<th>Savings</th>
<th rowspan="3">Savings for holiday!</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
It Specify that the two header cells are headers for columns.
The scope
attribute specifies whether a header cell is a header for a column, row, or group of columns or rows.
Note: The scope
attribute has no visual effect in ordinary web browsers, but can be used by screen readers.
<th scope="col|row|colgroup|rowgroup">
Value | Description |
---|---|
col | Specifies that the cell is a header for a column |
row | Specifies that the cell is a header for a row |
colgroup | Specifies that the cell is a header for a group of columns |
rowgroup | Specifies that the cell is a header for a group of rows |
Example:
HTML
<table>
<tr>
<th></th>
<th scope="col">Month</th>
<th scope="col">Savings</th>
</tr>
<tr>
<td>1</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>2</td>
<td>February</td>
<td>$80</td>
</tr>
</table>
html th |
Read Full: | HTML Tag |
Type: | Develop |
Category: | Web Tutorial |
Sub Category: | HTML Tag |
Uploaded: | 3 weeks ago |
Uploaded by: | Admin |
Views: | 65 |
Reffered: https://www.w3schools.com/tags/tag_th.asp