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>
Related
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 want to have a table like you see in the picture.
But I am really unsuccessful in this.
here is my code:
table,
td,
th {
border: 1px solid black;
}
table {
width: 100%;
border-collapse: collapse;
}
<table>
<tr>
<td>SOL</td>
<td>K</td>
<td>Y</td>
<td>M</td>
</tr>
<tr>
<td>
<td>b</td>
<td>a1</td>
</td>
<td>b</td>
<td>b</td>
</tr>
</table>
Could you please help me on this?
Here's the solution
table {
width: 100%;
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid lightgray;
font-family: sans-serif;
padding: 7px 15px;
}
<table>
<tbody>
<tr>
<th colspan="2">SOL</th>
<th>K</th>
<th>Y</th>
<th>M</th>
</tr>
<tr>
<td></td>
<td>a1</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>a2</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>b1</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>b2</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
I have several php generated tables like below, and I tried to add a table line on the 3rd and 4th row but I failed.
What I tried is this:
table.tbc td:nth-child(3) {
border-bottom: 0.12em solid #000000;
}
<table class='tbc'>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>E</td>
</tr>
<tr>
<td></td>
</tr>
</table>
How can I do this? I know this is an unusual table structure.
If I understand you correctly, you want to add a border between the 3rd and 4th trs. If so, the right selector is table.tbc tr:nth-child(3) td
table.tbc tr:nth-child(3) td {
border-bottom: 0.12em solid #000000;
}
<table class='tbc'>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>E</td>
</tr>
<tr>
<td></td>
</tr>
</table>
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>
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>