HTML Td Tag: Discover What Is Td And How To Use Table Data

Contents

• 1. HTML td: Main Tips
• 2. Defining Table Data
• 3. Mostly Used td Tag Attributes
• 4. Deprecated Attributes
• 5. Browser support

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 Copy <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> Try it Live Learn on Udacity

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

GET 50% OFF 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

UP TO 70% OFF Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

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 Copy <tr> <td colspan="3">Apples are very good for your health</td> </tr> Try it Live Learn on Udacity

headers shows the relation with header elements:

Example Copy <tr> <td headers="fruit">Apple</td> <td headers="vitamins">C, E, B3</td> <td headers="color">Red, Green</td> </tr> Try it Live Learn on Udacity

rowspan defines how many rows an element should span:

Example Copy <tr> <td>Apple</td> <td rowspan="3">C, E, B3</td> <td>Red, Green</td> </tr> Try it Live Learn on Udacity

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

Chrome

1+

Edge

All

Firefox

1+

IE

All

Opera

All

Safari

All

Mobile browser support

Chrome

All

Firefox

4+

Opera

All

Safari

All