![]() |
Definition and UsageThe An HTML table has two kinds of cells:
The text in The text in <th> elements are bold and centered by default. Browser SupportAttributes
Global AttributesThe Event AttributesThe |
Example:
HTML
<table>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
<tr>
<td>Cell C</td>
<td>Cell D</td>
</tr>
</table>
Right-align content in some data cells
Example:
HTML
<table style="width:100%">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td style="text-align:right">$100</td>
</tr>
<tr>
<td>February</td>
<td style="text-align:right">$80</td>
</tr>
</table>
Add Background Color to td
Example:
HTML
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td style="background-color:#FF0000">January</td>
<td style="background-color:#00FF00">$100</td>
</tr>
</table>
Add Specific Height to td
Example:
HTML
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td style="height:100px">January</td>
<td style="height:100px">$100</td>
</tr>
</table>
Add Nowrap to td
Example:
HTML
<table>
<tr>
<th>Poem</th>
</tr>
<tr>
<td style="white-space:nowrap">Never increase, beyond what is necessary, the number of entities required to explain anything</td>
</tr>
</table>
Vertical-align content in td
Example:
HTML
<table style="width:50%;">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr style="height:100px">
<td style="vertical-align:bottom">January</td>
<td style="vertical-align:bottom">$100</td>
</tr>
</table>
Add a width i percent for tds
Example:
HTML
<table style="width:100%">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td style="width:70%">January</td>
<td style="width:30%">$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>
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 <td>
element with the following default values.
Example:
HTML
<style>
td {
display: table-cell;
vertical-align: inherit;
}
</style>
<table>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
<tr>
<td>Cell C</td>
<td>Cell D</td>
</tr>
</table>
html td |
Read Full: | HTML Tag |
Type: | Develop |
Category: | Web Tutorial |
Sub Category: | HTML Tag |
Uploaded: | 1 month ago |
Uploaded by: | Admin |
Views: | 53 |
Reffered: https://www.w3schools.com/tags/tag_td.asp