How can I get cells on the right using colspan attribute? - html

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

Related

how can a html table have misaligned cell borders

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>

How to make a table two row in one column

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>

html table <td> expands with image, no matter the size of the image

I am building an html table to be used in an html email. I'm encountering a weird problem where anytime I put an image into a <td> it expands the td(and those below it to maximum width, rendering all columns to the right to their minimum width. The Google Chrome Inspector tool is indicating that the image is much wider than it really is. I have resized the image to 100x136px but the still expands to 1078px. I have also tried other images but get the same result. What could be causing this? Below is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
table {
width: 100%;
margin: 20px auto;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
.header {
height: 150px;
}
.bar {
height: 40px;
}
.greeting {
height: 300px;
}
.itemRow {
height: 250px;
}
.footer {
height: 75px;
}
.measure {
height: 25px;
}
img {
}
</style>
</head>
<body>
<table>
<tr class="header">
<td colspan="2" class="crest"><img src="crest.jpg" alt="" /></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 class="bar">
<td colspan="14"></td>
</tr>
<tr class="greeting">
<td colspan="14"></td>
</tr>
<tr class="itemRow">
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr class="measure">
<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>
<td></td>
</tr>
<tr class="itemRow">
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr class="measure">
<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>
<td></td>
</tr>
<tr class="itemRow">
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr class="footer">
<td colspan="12"></td>
<td colspan="1"></td>
<td colspan="1"></td>
</tr>
</table>
</body>
</html>

That's due to the nature of automatic table layout - the cells will shrink and grow according to their contents. But you can use table-layout: fixed; on the tabletag to avoid that and width: 100%; height: auto on the image itself to fit it into the cell:
table {
width: 100%;
margin: 20px auto;
border-collapse: collapse;
table-layout: fixed;
}
td {
border: 1px solid black;
}
.header {
height: 150px;
}
.bar {
height: 40px;
}
.greeting {
height: 300px;
}
.itemRow {
height: 250px;
}
.footer {
height: 75px;
}
.measure {
height: 25px;
}
img {
width: 100%;
height: auto;
}
<table>
<tr class="header">
<td colspan="2" class="crest"><img src="https://placehold.it/500x300/ea8" alt="" /></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 class="bar">
<td colspan="14"></td>
</tr>
<tr class="greeting">
<td colspan="14"></td>
</tr>
<tr class="itemRow">
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr class="measure">
<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>
<td></td>
</tr>
<tr class="itemRow">
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr class="measure">
<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>
<td></td>
</tr>
<tr class="itemRow">
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr class="footer">
<td colspan="12"></td>
<td colspan="1"></td>
<td colspan="1"></td>
</tr>
</table>

HTML Table design

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>

How do I replicate the exact layout of the attached document?

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>