Contents
HTML td: Main Tips
<td>stands for table data. By using it, you can define a cell in a table that contains certain data.- For your cells to remain in the same row, the
tdelements must be contained in the same pair of <tr> tags. - HTML
trtags can hold any number of HTMLtdtags. - Most of
tdtag's attributes are obsolete in HTML5.
Defining Table Data
HTML <td> tags are used to define a standard data cell in a table:
<table>
<tr>
<td style="border: 0.5px #333 solid;">First table cell</td>
<td style="border: 0.5px #333 solid;">Second table cell</td>
</tr>
</table>Mostly Used td Tag Attributes
You can use three attributes to modify your HTML td element:
colspanheadersrowspan
colspan defines how many columns a cell should span:
<tr>
<td colspan="3">Apples are very good for your health</td>
</tr>headers shows the relation with header elements:
<tr>
<td headers="fruit">Apple</td>
<td headers="vitamins">C, E, B3</td>
<td headers="color">Red, Green</td>
</tr>rowspan defines how many rows an element should span:
<tr>
<td>Apple</td>
<td rowspan="3">C, E, B3</td>
<td>Red, Green</td>
</tr>Deprecated Attributes
Some of HTML td attributes have been deprecated in HTML4 and removed absolutely in HTML5. Get familiar with them, but don't use them in your codes.
align aligned text with chosen alignment:
<tr>
<td align="left">Align: left</td>
<td align="center">Align: center</td>
<td align="right">Align: right</td>
<td align="justify">Align: justify</td>
<td align="char">Align: char</td>
</tr>Note: instead of align, use CSS text-align property.
abbr made hovering over the text show the content of the element:
<tr>
<td>Car</td>
<td abbr="vehicle">Audi</td>
</tr>
<tr>
<td>Plane</td>
<td abbr="plane">Boeing</td>
</tr>bgcolor allowed changing background color by using their names, RGB or HEX values:
<tr>
<td bgcolor="yellow">Background should be yellow</td>
<td bgcolor="bisque">Background should be bisque</td>
</tr>Note: instead of bgcolor, use CSS background-color property.
axis set a category name for cells:
<tr>
<td axis="fruit">Apple</td>
<td axis="internals">C, E, B3</td>
<td axis="internals">Red, Green</td>
</tr>height defined cell height:
<tr>
<td height="100">Apple</td>
<td height="100">C, E, B3</td>
<td height="100">Red, Green</td>
</tr>Note: instead of height, use CSS height property.
char aligned the table data in a cell to a character:
<tr>
<td>Apple</td>
<td char=",">C, E, B3</td>
<td char=",">Red, Green</td>
</tr>charoff shifted data to the right of the specified character:
<tr height="100">
<td>Apple</td>
<td align="char" charoff="2" char="," >C, E, B3</td>
<td align="char" charoff="1" char="," >Red, Green</td>
</tr>valign vertically aligned the table data in a cell:
<tr height="100">
<td valign="baseline">Apple</td>
<td valign="bottom">C, E, B3</td>
<td valign="top">Red, Green</td>
</tr>Note: instead of valign, use CSS vertical-align property.
nowrap set the text wrapping to none:
<table style="width: 10%;">
<tr height="100">
<td nowrap>Apples are very healthy</td>
<td>Apples are very healthy</td>
</tr>
</table>Note: instead of nowrap, use CSS white-space property.
width defined the td width:
<table style="width: 100%;">
<tr height="100">
<td width="10%">Apples are very healthy</td>
<td width="10px">Apples are very healthy</td>
<td>Apples are very healthy</td>
</tr>
</table>Note: use CSS width property to define td width.
scope linked specific cells with certain headings:
<table style="width: 100%;">
<tr>
<th scope="col">Apple</th>
<th scope="col">Apple</th>
</tr>
<tr height="100%">
<td scope="row">Apples are very healthy</td>
<td scope="row">Apples are very healthy</td>
</tr>
</table>