By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

HTML Td Tag

How to use the TR element in HTML, including a list of allowed attrubutes, and live examples.

Edited: 2014-12-28 07:11

The td element, is used inside the tr element, as table cells. Each td element, creates a table cell.

Table cells are the final structural part of a table, and contains the content of the table.

The columns of a table can be styled using col and colgroup.

Attributes

Attribute:Value:Description:
AttrsOther AttributesCommon, Event, I18n
abbrTextabbreviation for cell
axisCharacter Datacomma-separated list of related headers
headersID1 ID2 ID3. Etc. (space seperated)list of ids for header cells
scoperow|col|rowgroup|colgroupscope covered by header cells
rowspanNUMBERNumber of rows the cell will span.
colspanNUMBERNumber of columns the cell will span.
cellhalignleft|center|right|justify|charhorizontal alignment in cells
cellvaligntop|middle|bottom|baselinevertical alignment in cells

The colspan Attribute

The example below uses the colspan attribute, on a table header (th element), to include a describing header in the table.

<table>
  <tr>
    <th colspan="4">Contact us</th>
  </tr>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Phone</th>
    <th>Department</th>
  </tr>
  <tr>
    <td>John</td>
    <td>John.h@brugbart.com</td>
    <td>+45 123456789</td>
    <td>Customor Support</td>
  </tr>
</table>

Brugbart Vision!

The Abbr Attribute

The abbr attribute, is short for "abbreviation", and is basically a description of what the cell contains. Screen readers may use this to describe the content to the user.

<table>
 <tr>
  <td>Technique</td><td>Example</td>
 </tr>
 <tr>
  <td abbr="Webdesign Technique">BlueBodens BorderTechnique</td><td abbr="Example Link">http://brugbart.com/Examples/Bordertechnique.html</td>
 </tr>
</table>

Brugbart Vision!