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>
Related
table,
th,
td {
border: 1px solid black;
}
<html>
<table style="border:1px solid;">
<thead>
<tr>
<th rowspan="2">Type</th>
<th colspan="2">Client</th>
<th rowspan="2">Currency</th>
<th rowspan="2">Amount</th>
<th rowspan="2">Monthly Total</th>
<th rowspan="2">Yearly Total</th>
</tr>
<tr>
<th>Name</th>
<th>Id</th>
</tr>
</thead>
<tbody>
<tr>
<td>Customer</td>
<td colspan="4">
<table style="width:100%">
<tr>
<td>Client A</td>
<td>1234</td>
<td>USD</td>
<td>200</td>
</tr>
<tr>
<td>Client B</td>
<td>5678</td>
<td>USD</td>
<td>200</td>
</tr>
</table>
</td>
<td>300</td>
<td>500</td>
</tr>
<tr>
<td>Vendor</td>
<td colspan="4">
<table>
<tr>
<td>Client C</td>
<td>5678</td>
<td>GBP</td>
<td>100</td>
</tr>
</table>
</td>
<td>300</td>
<td>500</td>
</tr>
</tbody>
</table>
</html>
I have to achieve the above structure , but I am unable to align the inner table to match the width of the from the outer table . tried many things but unable to do it. Could some one please help me ?
So I have a two *ngFor nested , the first one is for the outer table tbody and the second one is for a row for the inner table.
Should you be nesting the table? I would use rowspan instead otherwise your table structure is not semantically correct
table,
th,
td {
border: 1px solid black;
}
<html>
<table style="border:1px solid;">
<thead>
<tr>
<th rowspan="2">Type</th>
<th colspan="2">Client</th>
<th rowspan="2">Currency</th>
<th rowspan="2">Amount</th>
<th rowspan="2">Monthly Total</th>
<th rowspan="2">Yearly Total</th>
</tr>
<tr>
<th>Name</th>
<th>Id</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Customer</td>
<td>Client A</td>
<td>1234</td>
<td>USD</td>
<td>200</td>
<td rowspan="2">300</td>
<td rowspan="2">500</td>
</tr>
<tr>
<td>Client B</td>
<td>5678</td>
<td>USD</td>
<td>200</td>
</tr>
<tr>
<td>Vendor</td>
<td>Client C</td>
<td>5678</td>
<td>GBP</td>
<td>100</td>
<td>300</td>
<td>500</td>
</tr>
</tbody>
</table>
</html>
This kind of thing can be very fiddly. I suggest you save yourself the headache with:
<th>Client Name</th><th>Client ID</th>
If you really have to achieve this structure, use colspan and rowspan.
I have a table that has a caption. To group related information together, I used colspan on the <th> rows (Total divisions and Elevation) so that they serve as "captions" for the cells below them. However, I am not sure if this is the appropriate way of doing it semantically. Particularly, how will I make sure that Total divisions and Elevation would only refer to the rows below them?
<table>
<caption>Summary</caption>
<tr>
<th>Name</th>
<td>Santo Cristo</td>
</tr>
<tr>
<th>Area</th>
<td>67.99 km<sup>2</sup></td>
</tr>
<tr>
<th scope="row" colspan="2">Total divisions</th>
</tr>
<tr>
<th scope="row">Cities</th>
<td>4</td>
</tr>
<tr>
<th scope="row">Villages</th>
<td>45</td>
</tr>
<tr>
<th scope="row" colspan="2">Elevation (masl)</th>
</tr>
<tr>
<th scope="row">Highest point</th>
<td>12 meters</td>
</tr>
<tr>
<th scope="row">Lowest point</th>
<td>0 meters</td>
</tr>
</table>
Group your rows into <tbody> elements and scope each summary <th> to its parent <tbody> with scope="rowgroup" in lieu of scope="row", like so:
<table>
<caption>Summary</caption>
<thead>
<tr>
<th>Name</th>
<td>Santo Cristo</td>
</tr>
<tr>
<th>Area</th>
<td>67.99 km<sup>2</sup></td>
</tr>
</thead>
<tbody>
<tr>
<th scope="rowgroup" colspan="2">Total divisions</th>
</tr>
<tr>
<th scope="row">Cities</th>
<td>4</td>
</tr>
<tr>
<th scope="row">Villages</th>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="rowgroup" colspan="2">Elevation (masl)</th>
</tr>
<tr>
<th scope="row">Highest point</th>
<td>12 meters</td>
</tr>
<tr>
<th scope="row">Lowest point</th>
<td>0 meters</td>
</tr>
</tbody>
</table>
(The first group can be either a <thead> or another <tbody> depending on your preference, but what's important are the two groups you're trying to scope the <th> elements to.)
I have the following table:
<table border="1">
<tr>
<th scope="col">Header</th>
<th scope="col">Header</th>
<th scope="col">Header</th>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td>Split this one into two columns</td>
</tr>
</table>
And I wish to split the cell which contains "Split this one into two columns" into two cells/columns. How do I go about this?
Fiddle
Like this http://jsfiddle.net/8ha9e/1/
Add colspan="2" to the 3rd <th> and then have 4 <td>'s in your second row.
<table border="1">
<tr>
<th scope="col">Header</th>
<th scope="col">Header</th>
<th scope="col" colspan="2">Header</th>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<!-- The following two cells will appear under the same header -->
<td>Col 1</td>
<td>Col 2</td>
</tr>
</table>
I came here for a similar problem I was facing with my table headers.
#MrMisterMan's answer, as well as others, were really helpful, but the borders were beating my game. So, I did some research to find the use rowspan.
Here's what I did and I guess it might help others facing something similar.
<table style="width: 100%; margin-top: 10px; font-size: 0.8em;" border="1px">
<tr align="center" >
<th style="padding:2.5px; width: 10%;" rowspan="2">Item No</th>
<th style="padding:2.5px; width: 55%;" rowspan="2">DESCRIPTION</th>
<th style="padding:2.5px;" rowspan="2">Quantity</th>
<th style="padding:2.5px;" colspan="2">Rate per Item</th>
<th style="padding:2.5px;" colspan="2">AMOUNT</th>
</tr>
<tr>
<th>Rs.</th>
<th>P.</th>
<th>Rs.</th>
<th>P.</th>
</tr>
</table>
You have two options.
Use an extra column in the header, and use <colspan> in your header to stretch a cell for two or more columns.
Insert a <table> with 2 columns inside the td you want extra columns in.
Change the <td> to be split to look like this:
<td><table><tr><td>split 1</td><td>split 2</td></tr></table></td>
is that what your looking for?
<table border="1">
<tr>
<th scope="col">Header</th>
<th scope="col">Header</th>
<th scope="col" colspan="2">Header</th>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td>Split this one</td>
<td>into two columns</td>
</tr>
</table>
Use this example, you can split with the colspan attribute
<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD>Item 1</TD>
<TD COLSPAN=2>Item 2</TD>
</TR>
<TR>
<TD>Item 3</TD>
<TD>Item 3</TD>
<TD>Item 4</TD>
<TD>Item 5</TD>
</TR>
</TABLE>
More examples at http://hypermedia.univ-paris8.fr/jean/internet/ex_table.html.
Please try the following way.
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
</table>
Please try this way.
<table border="1">
<tr>
<th scope="col">Header</th>
<th scope="col">Header</th>
<th colspan="2">Header</th>
</tr>
<tr>
<td scope="row"> </td>
<td scope="row"> </td>
<td scope="col">Split this one</td>
<td scope="col">into two columns</td>
</tr>
</table>
https://jsfiddle.net/SyedFayaz/ud0mpgoh/7/
<table class="table-bordered">
<col />
<col />
<col />
<colgroup span="4"></colgroup>
<col />
<tr>
<th rowspan="2" style="vertical-align: middle; text-align: center">
S.No.
</th>
<th rowspan="2" style="vertical-align: middle; text-align: center">Item</th>
<th rowspan="2" style="vertical-align: middle; text-align: center">
Description
</th>
<th
colspan="3"
style="horizontal-align: middle; text-align: center; width: 50%"
>
Items
</th>
<th rowspan="2" style="vertical-align: middle; text-align: center">
Rejected Reason
</th>
</tr>
<tr>
<th scope="col">Order</th>
<th scope="col">Received</th>
<th scope="col">Accepted</th>
</tr>
<tr>
<th>1</th>
<td>Watch</td>
<td>Analog</td>
<td>100</td>
<td>75</td>
<td>25</td>
<td>Not Functioning</td>
</tr>
<tr>
<th>2</th>
<td>Pendrive</td>
<td>5GB</td>
<td>250</td>
<td>165</td>
<td>85</td>
<td>Not Working</td>
</tr>
</table>
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>
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...