CODEWITHSUNDEEP
htmlhtml-table
Myxtic
Myxtic

Reputation: 5699

Adding a <th> element within a <th> element

I have an html table with one of the headers spanning over 2 columns. How can I add sub-headers to each of the 2 columns ?

For e.g. in the attached image, I want the 'Contact' column to have sub-headers 'Phone' and 'Address' for the respective columns.

enter image description here

Upvotes: 2

Views: 4815

Answers (4)

Miroslav Šiagi
Miroslav Šiagi

Reputation: 64

<table>
<tr>
<th>Title 1</th><th>Title 2</th><th colspan="2">Title 3</th>
</tr>
<tr>
<td>content</td><td>content</td><th>subtitle 1</th><th>subtitle 2</th>
</tr>
<tr>
<td>content</td><td>content</td><td>content</td><td>content</td>
</tr>
</table>

Upvotes: 1

jackwanders
jackwanders

Reputation: 16040

You need to have two separate header rows:

<tr>
  <th rowspan="2">Name</th>
  <th rowspan="2">Email</th>
  <th colspan="2">Contact</th>
</tr>
<tr>
  <th>Number</th>
  <th>Address</th>
</tr>

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324750

The same way you would if you were drawing out the table on paper:

<table>
  <thead>
    <tr>
      <th rowspan="2">Name</th>
      <th rowspan="2">Email</th>
      <th colspan="2">Contact</th>
    </tr>
    <tr>
      <th>Phone</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>
    <!-- your data goes here -->
  </tbody>
</table>

Upvotes: 5

TheZ
TheZ

Reputation: 3732

Add another row and put sub headers in <td /> tags. Maybe give the row a class and style the td text? That way they won't look identical to the real headers, that might cause confusion.

Upvotes: 1

Related Questions