Dealing With Td Layout Issues In HTML5 - Quick Tutorial

What does Dealing With Td Layout Issues In HTML5 - Quick Tutorial do?

The <td> element creates a single data cell in an HTML <table>. Data cells must be used as child elements of a parent <tr>, and the resulting group of <td> elements will be rendered as a single table row in a <table>.

Display

inline

Code Example

<table>
  <tr>
    <th>Awesome</th>
    <th>Acceptable</th>
    <th>Ugh</th>
  </tr>
  <tr>
    <td>Saturday</td>
    <td>Thursday</td>
    <td>Monday</td>
  </tr>
  <tr>
    <td>Sunny</td>
    <td>Partly Cloudy</td>
    <td>Wintery Mix</td>
  </tr>
  <tr>
    <td>Comfortable</td>
    <td>Cool</td>
    <td>Frigid</td>
  </tr>
</table>

Adding Data to a Table

Tables are the right choice for presenting tabular data that is difficult to present in other formats. Each data cell in an HTML table is added individually as a <td> element.

Dealing with <td> Layout Issues

By default, table data elements are laid out vertically aligned with the table data elements in preceding and following rows. For example, if a table includes three rows of data cells, the first data cell from each row will be aligned with the first data cell of each other row. As a result, adding an extra <td> element to a single row can create some unattractive results. For example, this HTML table:

<table>   <tr>     <td>The first</td>     <td>row of</td>     <td>td elements</td>   </tr>   <tr>     <td>The second</td>     <td>row of</td>     <td>td</td>     <td>elements</td>   </tr>   <tr>     <td>The third</td>     <td>row of</td>     <td>td elements</td>   </tr> </table> 

Won’t look very good unless we do something to address the extra data cell in the middle row.

This is where the colspan comes in. With this attribute we can tell the cells above and below the offending extra cell to span across two table data cells. You can learn more about this attribute at our page dedicated to the table data colspan attribute. Here’s a sneak-peek at what we can do with this attribute to deal with data cell layout issues:

Adam Wood

Adam is a technical writer who specializes in developer documentation and tutorials.