CODEWITHSUNDEEP
html
josh
josh

Reputation: 10358

It is possible to make a vertical table with horizontal headers?

I'm trying to create a vertical table, with headers on specific areas such as a user's address. I want to create something like this:

        General Information

Name                John Smith
Date of Birth       April 1, 1984
Gender              Male

        Account Information

       Correspondence Address
Address 1           1234 MLK Blvd
Address 2           502
City                Kansas City
State               Missouri
Country             USA
Zip Code            55748

     Residential Address
Address 1           143 St Michael's Way
Address 2
City                Independence
State               Missouri
Country             USA
Zip Code            55760

I am currently using this code for the table without headers:

<table>
    <tr id='Name'>
        <th>Name</th>
    </tr>
    <tr id='PersonEmail'>
        <th>Email</th>
    </tr>
    <tr id='Gender'>
        <th>Gender</th>
        <td></td>
    </tr>
    <tr id='Date_of_Birth'>
        <th>Date of Birth</th>
        <td></td>
    </tr>
</table>

How do I add headers at the top of the table?

Upvotes: 0

Views: 97

Answers (5)

Duncan
Duncan

Reputation: 1550

It's just a case of rearranging the <td>'s and <th>'s

Table headers (or "captions") are simply an extra tag.

Option 1: (traditional)

<table>
    <caption>General Information</caption>
    <tr>
        <th>Name</th>
        <td>John Smith</td>
    </tr>
    <tr>
        <th>Date of Birth</th>
        <td>April 1, 1984</td>
    </tr>
    <tr>
        <th>Gender</th>
        <td>Male</td>
    </tr>
</table>
<table>
    <caption>Account Information</caption>
</table>
<table>
    <caption>Correspondence Address</caption>
    <tr>
        <th>Address 1</th>
        <td>1234 MLK Blvd</td>
    </tr>
    <tr>
        <th>Address 2</th>
        <td>502</td>
    </tr>
    <tr>
        <th>City</th>
        <td>Kansas City</td>
    </tr>
    <tr>
        <th>State</th>
        <td>Missouri</td>
    </tr>
    <tr>
        <th>Country</th>
        <td>USA</td>
    </tr>
    <tr>
        <th>Zip Code</th>
        <td>55748</td>
    </tr>
</table>
<table>
    <caption>Residential Address</caption>
    <tr>
        <th>Address 1</th>
        <td>143 St Michael's Way</td>
    </tr>
    <tr>
        <th>Address 2</th>
        <td></td>
    </tr>
    <tr>
        <th>City</th>
        <td>Independence</td>
    </tr>
    <tr>
        <th>State</th>
        <td>Missouri</td>
    </tr>
    <tr>
        <th>Country</th>
        <td>USA</td>
    </tr>
    <tr>
        <th>Zip Code</th>
        <td>55760</td>
    </tr>
</table>

Option 2: (Using additional tr as a sub-header)

<table>
    <tr>
        <th colspan="2" class="caption">General information</th>
    </tr>
    <tr>
        <th>Name</th>
        <td>John Smith</td>
    </tr>
    <tr>
        <th>Date of Birth</th>
        <td>April 1, 1984</td>
    </tr>
    <tr>
        <th>Gender</th>
        <td>Male</td>
    </tr>
    <tr>
        <th colspan="2" class="caption">Account Information</th>
    </tr>
    <tr>
        <!-- Account Info -->
    </tr>
    <tr>
        <th colspan="2" class="caption">Correspondence Address</th>
    </tr>
    <tr>
        <th>Address 1</th>
        <td>1234 MLK Blvd</td>
    </tr>
    <tr>
        <th>Address 2</th>
        <td>502</td>
    </tr>
    <tr>
        <th>City</th>
        <td>Kansas City</td>
    </tr>
    <tr>
        <th>State</th>
        <td>Missouri</td>
    </tr>
    <tr>
        <th>Country</th>
        <td>USA</td>
    </tr>
    <tr>
        <th>Zip Code</th>
        <td>55748</td>
    </tr>
    <tr>
        <th colspan="2" class="caption">Residential Address</th>
    </tr>
    <tr>
        <th>Address 1</th>
        <td>143 St Michael's Way</td>
    </tr>
    <tr>
        <th>Address 2</th>
        <td></td>
    </tr>
    <tr>
        <th>City</th>
        <td>Independence</td>
    </tr>
    <tr>
        <th>State</th>
        <td>Missouri</td>
    </tr>
    <tr>
        <th>Country</th>
        <td>USA</td>
    </tr>
    <tr>
        <th>Zip Code</th>
        <td>55760</td>
    </tr>
</table>

Upvotes: 0

Sobin Augustine
Sobin Augustine

Reputation: 3775

give colspan as a desired value to occupy the position as headers

<table>
    <tr>
        <td colspan='2'>General Information</td>
    </tr>
    <tr >
       <td >Name </td>
        <td > John Smith </td>
    </tr>
    <tr>
         <td >Date of Birth</td>
        <td >  April 1, 1984</td>
    </tr>
</table>

Upvotes: 1

M.R
M.R

Reputation: 526

<table>
<tr>
<td></td>
<td colspan="2">General Information</td>
</tr>

<tr id='Name'>
    <th>Name</th>
<td></td>
</tr>
<tr id='PersonEmail'>
    <th>Email</th>
<td></td>
</tr>
<tr id='Gender'>
    <th>Gender</th>
<td></td>
    <td></td>
</tr>
<tr id='Date_of_Birth'>
    <th>Date of Birth</th>
    <td></td>
</tr>

Upvotes: 0

Kuzgun
Kuzgun

Reputation: 4747

<table>
<tr><td colspan="2">Title 1</td></tr>
    <tr id='Name'>
        <th>Name</th>
    </tr>

<tr><td colspan="2">Title 2</td></tr>
    <tr id='PersonEmail'>
        <th>Email</th>
    </tr>
    ...
</table>

Upvotes: 0

gen
gen

Reputation: 10040

demo here, code here:

<table border="1">
  <tr>
    <th colspan="2">Header</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$100</td>
  </tr>
  <tr>
    <th colspan="2">Header2</th>
  </tr>
</table>

Upvotes: 0

Related Questions