td HTML Table Cell Tag

HTML Table cells are marked by the td tag: <td>...</td>

HTML cells are the little boxes in tables that you can put things in, like text, images, or even another table. You can make rows and columns of boxes to organize your things. For example, you can put your toys in one row and your books in another row. You can also put labels on the boxes to tell what’s inside them. HTML table cells help you make your web page look neat and tidy.

Syntax

The td is the child of the tr (table row), and it can contain text, images and other inline or block elements, even another nested table.

<table>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
    <td>D</td>
  </tr>
</table>

Table Cells Are Marked With th In The Header

Table cells are marked with th in the header, and td in the table body and the footer. You can place them directly as the child of a table row even if there's no thead, tbody, tfoot defined, as demonstrated below.

Here's a list to sum it up:

• th - in thead
• td - in tbody and tfoot

<table>
  <thead>
    <tr>
      <th>th head 1</th>
      <th>th head 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>td body 1</td>
      <td>td body 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>td foot 1</td>
      <td>td foot 2</td>
    </tr>
  </tfoot>
</table>

Nested Tables: Table in a Cell

Nested tables are a way of putting many small tables inside a big table. Imagine you have a big box that can fit many small boxes inside it. Each small box can have different things inside it, like text or images or other boxes. You can use the big box to organize and store your small boxes. That’s kind of like what nested tables do. They help you organize and store your data in a neat way.

<table class="demo">
    <tbody>
        <tr>
            <td>A</td>
            <td>B</td>
        </tr>
        <tr>
            <td>C</td>
            <td>
                <table>
                    <tbody>
                        <tr>
                            <td>A</td>
                            <td>B</td>
                        </tr>
                        <tr>
                            <td>C</td>
                            <td>D</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

Merging Table Cells

We can enlarge a cell by combining two or more cells horizontally with colspan and vertically with the rowspan attributes. Learn more about these on their deticated pages, linked above.

<table>
   <tbody>
      <tr>
         <td>A1</td>
         <td>B1</td>
         <td>C1</td>
         <td>D1</td>
         <td>E1</td>
      </tr>
      <tr>
         <td>A2</td>
         <td colspan="3" class="red">B2</td>
         <td>C2</td>
      </tr>
      <tr>
         <td>A3</td>
         <td rowspan="3" class="green">B3</td>
         <td>C3</td>
         <td>D3</td>
         <td>E3</td>
      </tr>
      <tr>
         <td>A4</td>
         <td>C4</td>
         <td>D4</td>
         <td>E4</td>
      </tr>
      <tr>
         <td>A5</td>
         <td>C5</td>
         <td>D5</td>
         <td>E5</td>
      </tr>
   </tbody>
</table>

Table Cells Generator

Click a table cell below to generate the code for a HTML table instantly. Use this tool to set up table cells automatically in the header, body and footer. Style the sections using the templates in the gallery.