I'd like to make an HTML table with a "<th> split", like this:
I tried to make the HTML table by splitting the <th> tag using rowspan and colspan, but I need it exactly like in the image.
No need for rowspan as you will use an inner table to compose the 4 rows JS Fiddle
table {
width: 98%;
height: 160px;
margin: 0 auto;
text-align: center;
border-collapse: collapse;
}
td {
border: 2px solid black;
}
#t1 table {
width: 100%;
}
<table id="t1">
<tr>
<td>TD</td>
<td>TD</td>
<td>TD</td>
<td>
<table>
<tr>
<td>TD</td>
<td>TD</td>
</tr>
<tr>
<td>TD</td>
<td>TD</td>
</tr>
<tr>
<td colspan="2">TD</td>
</tr>
<tr>
<td>TD</td>
<td>TD</td>
</tr>
</table>
</td>
<td>TD</td>
<td>TD</td>
</tr>
</table>
Here's what I could come up with: https://jsfiddle.net/ryrL79pr/
<html>
<body>
<table>
<tr>
<th rowspan="4">A</th>
<th rowspan="4">B</th>
<th rowspan="4">C</th>
<th>
<table>
<tr>
<th>1</th>
<th>2</th>
</tr>
</table>
</th>
<th rowspan="4">D</th>
<th rowspan="4">E</th>
<th rowspan="4">F</th>
</tr>
<tr>
<th>
<table>
<tr>
<th>1</th>
<th>2</th>
</tr>
</table>
</th>
</tr>
<tr>
<th>3</th>
</tr>
<tr>
<th>
<table>
<tr>
<th>1</th>
<th>2</th>
</tr>
</table>
</th>
</tr>
</table>
Hope that helps!
<tr>
<th rowspan="3">Client</th>
<th rowspan="3">Apt No</th>
<th rowspan="3">Sq.ft Area</th>
<th rowspan="3">Listed Price</th>
<th>Date 28-FEB-2015</th>
<th>Date 28-FEB-2015</th>
<th>Date 28-FEB-2015</th>
</tr>
<tr>
<th>1st Instalment</th>
<th>2nd Instalment</th>
<th>3rd Instalment</th>
</tr>
<tr>
<th>10% status</th>
<th>10% status</th>
<th>10% status</th>
</tr>
</table>
No need to css https://jsfiddle.net/parthmy007/s7v70dk7/
<table border="1">
<thead>
<tr>
<th rowspan="4">Items</th>
<th rowspan="4">Type</th>
<th rowspan="4">Type</th>
<th colspan="4">Values</th>
<th>Values</th>
<th rowspan="4">Date</th>
<th rowspan="4">Date</th>
</tr>
<tr>
<th colspan="4">Before</th>
<th >Before</th>
</tr>
<tr>
<th colspan="5">Before</th>
</tr>
<tr>
<th colspan="4">Before</th>
<th >Before</th>
</tr>
</thead>
<tbody></tbody>
</table>
https://jsfiddle.net/parthmy007/s7v70dk7/
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.)
Does anyone here knows how to make a table header like this (refer to the image below)?
I tried:
<thead>
<tr>
<th>No.</th>
<th>Creation Date</th>
<th>Week Day</th>
<th>Log Type</th>
<th colspan="5" rowspan="1" style="text-align: center">Time</th>
<th>action</th>
</tr>
<tr>
<th>IN/START</th>
<th>OUT/STOP</th>
</tr>
</thead>
but sadly, no luck, the table head is missed up, any help, suggestions, clues, recommendations, suggestions, ideas?
That's supposed to be colspan="2" on the one column and rowspan="2" on others. Use this:
table, th {border: 1px solid #ccc; border-collapse: collapse; font-weight: normal; font-family: 'Segoe UI'; margin: 0; padding: 0;}
table {width: 100%;}
th {padding: 5px;}
<table>
<thead>
<tr>
<th rowspan="2">No.</th>
<th rowspan="2">Creation Date</th>
<th rowspan="2">Week Day</th>
<th rowspan="2">Log Type</th>
<th colspan="2" style="text-align: center">Time</th>
<th rowspan="2">action</th>
</tr>
<tr>
<th>IN/START</th>
<th>OUT/STOP</th>
</tr>
</thead>
</table>
Used to colspan="" and rowspan="" carefully as like this
Try to this
th{
border:solid 1px red;
padding:5px;
}
<table border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th rowspan="2">No.</th>
<th rowspan="2">Creation Date</th>
<th rowspan="2">Week Day</th>
<th rowspan="2">Log Type</th>
<th colspan="2" style="text-align: center">Time</th>
<th rowspan="2">action</th>
</tr>
<tr>
<th>IN/START</th>
<th>OUT/STOP</th>
</tr>
</thead>
</table>
Try with following, It will be helpfull
<table>
<tr>
<th>No.</th>
<th>Creation Date</th>
<th>Week Day</th>
<th>Log Type</th>
<th>
<table>
<tr>Time</tr>
<tr>
<th>IN/START</th>
<th>OUT/STOP</th>
</tr>
</table>
</th>
<th>action</th>
</tr>
</table>
No need to use colspan and rowspan use this simple code and add your css according to your need.
<table border="1">
<tr>
<th>No.</th>
<th>Creation Date</th>
<th>Week Day</th>
<th>Log Type</th>
<th>
<table border="1">
<tr>
<p style="text-align: center !important;">Time</p>
</tr>
<tr>
<th>IN/START</th>
<th>OUT/STOP</th>
</tr>
</table>
</th>
<th>action</th>
</tr>
</table>
have a fun.
You Should use rowspan and colspan properly.
Tutorial
and here I wrote some HTML Code here, I hope it will be helpful.
<table cellpadding="0" cellspacing="0" >
<tr>
<th rowspan="2">No</th>
<th rowspan="2">CREATION DATE</th>
<th rowspan="2">WEEK DAY</th
<th rowspan="2">LOG TYPE</th>
<th colspan="2">TIME</th>
<th rowspan="2">ACTION</th>
</tr>
<tr>
<th >IN/START</th>
<th >OUT/STOP</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td>TBODY</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
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 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>