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.
Related
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 created a table which loops from a database. Now I need to display this multiple table in a single row. Currently the loop display tables in columns. Please can someone suggest how to write the markup, so that it generates and displays table data in a single row?
For example, if there are 10 tables loops from the database, then there should be 10 cells in a single table row. The table should not contain anything below that row. It's ok for a horizontal scrollbar to display in the event that the table is longer than the screen width.
<table width="100%" class="table table-bordered table-striped">
<table>
<thead>
<tr>
<th colspan="2">First Name</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">James</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
</tr>
</tbody>
</table>
Table inside table is not valid. You have to add table row then add all the tables under each table columns like below.
<table width="100%" class="table table-bordered table-striped">
<tr>
<td>
<table>
<thead>
<tr>
<th colspan="2">First Name</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">James</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
</tr>
</tbody>
</table>
</td>
<td>
Your Second Table Goes here..
</td>
<td>
Your Third Table Goes here and so on.
</td>
</tr>
</table>
If I understand you right, you want the table shown above to be repeated multiple times such and to appear side by side in a single row.
What I would do is add the CSS property display: inline-table (use a class) to the relevant tables.
See the following example:
.tablePanel {
width: 300%;
word-break: nowrap;
border: 1px dotted blue;
}
.tablePanel table {
border: 1px dashed gray;
display: inline-table;
width: 200px;
}
<div class="tablePanel">
<table>
<thead>
<tr>
<th colspan="2">First Name</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">James</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="2">First Name</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">James</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
</tr>
</tbody>
</table> <table>
<thead>
<tr>
<th colspan="2">First Name</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">James</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
</tr>
</tbody>
</table> <table>
<thead>
<tr>
<th colspan="2">First Name</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">James</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
</tr>
</tbody>
</table>
</div>
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 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...
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>