🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

HTML td Tag

Reading time 3 min
Published Jun 29, 2017
Updated Oct 11, 2019

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 td elements must be contained in the same pair of <tr> tags.
  • HTML tr tags can hold any number of HTML td tags.
  • Most of td tag's attributes are obsolete in HTML5.

Defining Table Data

HTML <td> tags are used to define a standard data cell in a table:

Example
<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>

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

Mostly Used td Tag Attributes

You can use three attributes to modify your HTML td element:

  • colspan
  • headers
  • rowspan

colspan defines how many columns a cell should span:

Example
<tr> 
  <td colspan="3">Apples are very good for your health</td>
</tr>

headers shows the relation with header elements:

Example
<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:

Example
<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:

Example
<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:

Example
<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:

Example
<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:

Example
<tr>
  <td axis="fruit">Apple</td>
  <td axis="internals">C, E, B3</td>
  <td axis="internals">Red, Green</td>
</tr>

height defined cell height:

Example
<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:

Example
<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:

Example
<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:

Example
<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:

Example
<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:

Example
<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:

Example
<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>

Browser support

Browser image
Chrome
1+
Browser image
Edge
All
Browser image
Firefox
1+
Browser image
IE
All
Browser image
Opera
All
Browser image
Safari
All

Mobile browser support

Browser image
Chrome
All
Browser image
Firefox
4+
Browser image
Opera
All
Browser image
Safari
All