I need to display my table in this desired format.
I am not sure as to how to achieve a column within a column (AA, MQ) under a super column (Aug-18)).
You need to think about it the other way around.
The month headings are headings for two columns, they aren't a single column with multiple columns inside them.
Make the headings span multiple columns with the colspan attribute.
table,
th,
td {
border-collapse: collapse;
border: solid #aaa 1px;
padding: 1ex;
}
<table>
<thead>
<tr>
<td>
<th scope=col colspan=2> Aug-18
<th scope=col colspan=2> Sep-18
<tr>
<td>
<th scope=col> AA <!-- These should probably have <abbr> elements -->
<th scope=col> MQ
<th scope=col> AA
<th scope=col> MQ
<tbody>
<tr>
<th scope=row> Count1
<td> 0
<td> 0
<td> 0
<td> 0
<tr>
<th scope=row> Count2
<td> 0
<td> 0
<td> 0
<td> 0
<tr>
<th scope=row> Count3
<td> 0
<td> 0
<td> 0
<td> 0
<tfoot>
<tr>
<th scope=row> Total
<td> 0
<td> 0
<td> 0
<td> 0
</table>
.this-tbl { width: 100%; }
th, td {
border: 1px solid #333;
padding: 4px;
border-collapse: collapse;
}
<table cellspacing="0" class="this-tbl">
<tr>
<th></th>
<th colspan="2">Aug-18</th>
<th colspan="2">Sep-18</th>
<th colspan="2">Oct-18</th>
<th colspan="2">Nov-18</th>
</tr>
<tr>
<td></td>
<td>AA</td>
<td>MQ</td>
<td>AA</td>
<td>MQ</td>
<td>AA</td>
<td>MQ</td>
<td>AA</td>
<td>MQ</td>
</tr>
<tr>
<td>Count1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Count2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Count3</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Total</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Related
I am struggling to make a html table that copies the layout of the table above.
I am just wondering what techniques to use and to recreate that table
I have tried nested tables and have looked into using div instead to create this but am still having issues, mainly with the way that the lines are presented in this and are not in an obvious layout
Here is a cool tool:
https://tabletag.net/
Here you need to nest a table in the second row
table,
td,
th {
border: 1px solid #595959;
border-collapse: collapse;
}
td,
th {
padding: 3px;
width: 30px;
height: 25px;
}
th {
background: #f0e6cc;
}
.even {
background: #fbf8f0;
}
.odd {
background: #fefcf9;
}
<table>
<tbody>
<tr>
<td colspan="3"></td>
<td colspan="5"></td>
<td colspan="3" rowspan="2"></td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="5"></td>
</tr>
<tr>
<td colspan="6"></td>
<td colspan="5"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<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>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
I have tried this:
<table class="travaux">
<tr>
<th>Nature de l’opération</th>
<th>Unité</th>
<th>Quantité</th>
<th>P.U (dh)</th>
<th>Coût (dh)</th>
<th>N.J.T</th>
</tr>
<tr>
<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>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3">Coût total : </td>
</tr>
<tr>
<td colspan="3">TVA (20%) : </td>
</tr>
<tr>
<td colspan="3">T.T.C : </td>
</tr>
</table>
.techniques{
width: 70%;
}
.techniques,.techniques th, .techniques td{
border: 1px solid;
border-collapse: collapse;
}
.techniques td{
border-top: hidden;
text-align: center;
padding: 6px;
}
to get this:
but I only get it like this:
please Could anyone tell me how I can get total section on the right instead of left?
<tr>
<td colspan="3" style="border-left: none;border-bottom: none;"></td>
<td colspan="3">Coût total : </td>
</tr>
that should do it. You can't just use 3 cols, when you got a 6 col layout
I have only problem with the small column. How to create the small column.
Here is a rough solution, using the rowspan and colspan attributes:
<style>
th, td {
border:1px solid black;
}
table {
border-collapse:collapse;
}
</style>
<table>
<tr>
<th rowspan="2">Description of waste</th>
<th rowspan="2" colspan="6">List of wastes</th>
<th rowspan="2">Quantity</th>
<th colspan="2">The chemical/biological components</th>
<th rowspan="2">Physical form</th>
<th rowspan="2">Hazard code(s)</th>
<th rowspan="2">Container type</th>
</tr>
<tr>
<th>Component</th>
<th>Concentration</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<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>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
https://jsfiddle.net/tn7rd9sq/
I need create the table of this image:
<table border='1'>
<tr>
<th rowspan="3">text</th>
<th colspan="2">text</th>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>other text</td>
<td>2</td>
<td>2</td>
</tr>
</table>
I do not know how to do the part when there are 3 together
td {
width: 20px;
height: 20px;
}
td.wider {
width: 60px;
}
tr.taller {
height: 40px;
}
<table border='1'>
<tr class="taller">
<td class="wider" rowspan="3"></td>
<td colspan="6"></td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="3"></td>
</tr>
<tr>
<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>
</tr>
</table>
Hi
The form is a word document and I have been trying to recreate it exactly as is with html but having difficulty unfotunately.
This is what I have so far. Perhaps, css is the reason why it isn't laying out correctly.
Thanks for your assistance.
CSS - Must have:
<style type="text/css">
table .mystyle
{
border-width: 0 0 1px 1px;
border-spacing: 0;
border-collapse: collapse;
border-style: solid;
border-color:#000;
width:900px;
}
.mystyle td, .mystyle th
{
margin: 0;
padding: 4px;
border-width: 1px 1px 0 0;
border-style: solid;
font-size:medium;
border-color:#000;
}
</style>
Current html:
<table class="mystyle">
<tr>
<td style="width:50px;" class="style7"> </td>
<td style="width:158px;" class="style7">Milestone</td>
<td style="width:158px;" class="style7">Owner</td>
<td style="width:108px;white-space:nowrap;">
<TABLE border="1">
<TR>
<TD colspan="2">Completion Date</TD>
</TR>
<TR>
<TD>Target</TD>
<TD>Actual</TD>
</TR>
</TABLE>
</td>
<td style="width:358px;" class="style7">Comments</td>
</tr>
<tr>
</tr>
</table>
Extreme left are Qtr 1 through Qtr4
The key to laying out that table is using rowspan and colspan attributes.
http://tinker.io/174de/1
<table class="mystyle">
<thead>
<tr>
<th rowspan="2">Quarter</th>
<th rowspan="2">Milestone</th>
<th rowspan="2">Owner</th>
<th colspan="2">Completion Date</th>
<th rowspan="2">Comments</th>
</tr>
<tr>
<th>Target</th>
<th>Actual</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="3">Q1</th>
<td>a</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>b</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>c</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<th rowspan="3">Q2</th>
<td>a</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>b</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>c</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>