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

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?


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>


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>


<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>


<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>


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>

Related

Nested ( master detail ) table in html

I added child table in tr but I am unable to make a grid like shown in mockup.
Basically, I got the idea from dev extreme grid. https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/MasterDetailView/Angular/Light/

You should be able to use further <tr>, <td>, <th> elements to do what you need, since it seems like you want to keep the same table layout for the pseudo-child-tables:
<table>
<thead>
<tr>
<th>Teader Id</th>
<th>Name</th>
<th>address</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>ABC</td>
<td>32 block</td>
<td></td>
</tr>
<tr>
<th></th>
<th>Student Id</th>
<th>Name</th>
<th>Gender</th>
</tr>
<tr>
<td></td>
<td>11</td>
<td>DEF</td>
<td>Male</td>
</tr>
<tr>
<td>2</td>
<td>GHI</td>
<td>32 block</td>
<td></td>
</tr>
<tr>
<th></th>
<th>Student Id</th>
<th>Name</th>
<th>Gender</th>
</tr>
<tr>
<td></td>
<td>12</td>
<td>JKL</td>
<td>Male</td>
</tr>
<tr>
<td>3</td>
<td>MNO</td>
<td>32 block</td>
<td></td>
</tr>
<tr>
<th></th>
<th>Student Id</th>
<th>Name</th>
<th>Gender</th>
</tr>
<tr>
<td></td>
<td>11</td>
<td>PQR</td>
<td>Male</td>
</tr>
</tbody>
</table>

Merge Column Into Rows In Html Table

Rowspan And Colspan For Building HTML Tables.
I want the first five column in a single row without any data as shown in editable fig. ,Can use rowspan or colspan.
Only The Last Two Column is as it is as shown in the editable fig. And There should be a row before that two column which is the combination of the five columns and that should be blank.
<div class="row">
<div class="col-12">
<table>
<thead>
<tr>
<th>Savings for holiday!</th>
<th>Date!</th>
<th>Year</th>
<th>Month</th>
<th>Time</th>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>$100</td>
<td>10/10/2020</td>
<td>2020</td>
<td>January</td>
<td>4:30pm</td>
<td>hrishi</td>
<td>male</td>
</tr>
</tbody>
<tbody>
<tr>
<td>$100</td>
<td>10/10/2020</td>
<td>2020</td>
<td>January</td>
<td>4:30pm</td>
<td>hrishi</td>
<td>male</td>
</tr>
</tbody>
</table>
</div>
</div>

See the code below.
<table>
<tr>
<th colspan="5" rowspan="3" width="300"></th>
<th>Name</th>
<th>Gender</th>
</tr>
<tr>
<td>hrishi</td>
<td>male</td>
</tr>
<tr>
<td>hrishi</td>
<td>male</td>
</tr>
</table>

I applied the bootstrap css class in css file and got my answer.
<table>
<tr>
<th colspan="5" rowspan="3" class="w-70"></th>
<th>Name</th>
<th>Gender</th>
</tr>
<tr>
<td>hrishi</td>
<td>male</td>
</tr>
<tr>
<td>hrishi</td>
<td>male</td>
</tr>
</table>
And add the width property in style.css file -
.w-70 {
width: 70%;
}

Make TH equals to 3 columns in HTML

Hello, I want to make ACTIONS equal to three columns
As shown in image, I want ACTIONS in center of Detail Update Delete
Please help.

<table border=1>
<tr>
<th>NAME</th>
<th>AGE</th>
<th colspan="3">ACTIONS</th>
</tr>
<tr>
<td>Salman Mushtaq</td>
<td>27</td>
<td>Detail</td>
<td>Update</td>
<td>Delete</td>
</tr>
<tr>
<td>Muhanmmad Awais</td>
<td>32</td>
<td>Detail</td>
<td>Update</td>
<td>Delete</td>
</tr>
</tr>
<tr>
<td>Imran Hassan</td>
<td>38</td>
<td>Detail</td>
<td>Update</td>
<td>Delete</td>
</tr>
</tr>
<tr>
<td>Muhammad Asad</td>
<td>33</td>
<td>Detail</td>
<td>Update</td>
<td>Delete</td>
</tr>
</table>
Try to search about colspan and rowspan

Use colspan attribute in TH tag (ie. colspan="3")
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th colspan="3">Action (spanned 3 cols)</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>action 1</td>
<td>Action 2</td>
<td>Action 3</td>
</tr>
</tbody>
</table>

How to include 2 columns under one column header in html table?

I want to create an html table, which should look like this:
I know I will have to use colspan/rowspan attributes, but how? Can anyone help?
I have tried following :
<table>
<thead>
<tr>
<th>Evaluation</th><th>Approval</th>
<th colspan="2" >Points</th>
<th>Total</th>
<th>Date</th><th>Award Amount</th><th>Last Modified By</th>
</tr>
</thead>
<tbody>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</tbody>
</table>
but is is giving me result as:
Clearly, I need to subheader in 3rd header (Points), how to achieve this?

Like this:
<table>
<thead>
<tr>
<th rowspan="2">Evaluation</th>
<th rowspan="2">Approval</th>
<th colspan="2">Points</th> // <- note colspan here
<th rowspan="2">Total</th>
<th rowspan="2">Date</th>
<th rowspan="2">Award Amount</th>
<th rowspan="2">Last Modified By</th>
</tr>
<tr>
<th>Tangible</th>
<th>Intangible</th>
</tr>
</thead>
<tbody>
<tr>
<td>Al/GL</td>
<td>Select</td>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
<td>col5</td>
<td>col6</td>
</tr>
</tbody>
</table>

this is the table fullstructure
<table>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
thanks...

Table with two rows, one row only for title - HTML

I am trying to make a table with two rows and multiple columns in html. I want the first row to have only one space instead of two for each column. It will be a title space for the entire table.
Example: (Specifications is the Title)
[Specifications]
[Power ][200 Lumens ]
[Lamp ][4 Ultrabright LEDs, Maxbright LED]
[Burn Time ][150 Hours ]

Use colspan="2"
<table border="1">
<tr>
<th colspan="2">Specifictaions</th>
</tr>
<tr>
<td>Power</td>
<td>200 Lumens</td>
</tr>
<tr>
<td>Lamp</td>
<td>4 Ultrabright LEDs, Maxbright LED</td>
</tr>
<tr>
<td>Burn Time</td>
<td>150 Hours</td>
</tr>
</table>
Fiddle: http://jsfiddle.net/tCvBn/
Screenshot

If there is just one section to the table (viz: all the table contents are specifications) I'd probably use a caption element to mark that up:
<table>
<caption>Specifications</caption>
<tr>
<th scope="row">Power</th>
<td>200 Lumens</td>
</tr>
<tr>
<th scope="row">Lamp</th>
<td>4 Ultrabright LEDs, Maxbright LED</td>
</tr>
<tr>
<th scope="row">Burn Time</th>
<td>150 Hours</td>
</tr>
</table>
If there are multiple sections, I'd use the spanning (<th scope="col" colspan="2">... table headers:
<table>
<tr>
<th scope="col" colspan="2">Specifications</th>
</tr>
<tr>
<th scope="row">Power</th>
<td>200 Lumens</td>
</tr>
<tr>
<th scope="row">Lamp</th>
<td>4 Ultrabright LEDs, Maxbright LED</td>
</tr>
<tr>
<th scope="row">Burn Time</th>
<td>150 Hours</td>
</tr>
<tr>
<th scope="col" colspan="2">Some Other Section</th>
</tr>
<tr>
<th scope="row">Foo</th>
<td>Bar</td>
</tr>
<tr>
<th scope="row">Baz</th>
<td>Qux</td>
</tr>
</table>
fiddle

I believe this is what you're looking for! Here is a demo
<table width="100" border="1">
<tr>
<th colspan="2">Foo</th>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
</table>