Generally we make rowspan and colspan after the first column of the table. But in my case I want to draw a table like in this photo :
How to achieve it ?
To solve these problems, imagine everything is expanded and each block is a significant part of the table definition. Using that information, you have 19 columns and 2 rows. From there you allocate your groups:
"Valeurs Cibles Cumulees" has a colspan of 4.
"Chronogramme" has a colspan of 12.
"Taches", "Source of Financement", and "Responsables" have a rowspan of 2.
Here you go:
table,
td {
border: 1px solid #999;
}
table {
width: 400px;
height: 50px
}
<table>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="4"></td>
<td rowspan="2"></td>
<td colspan="12"></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>
<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
When applying :hover-attributes, and clicking (hold left mouse button) on a cell while moving the cursor over the other rows, only the first clicked row gets highlighted on hover:
jsfiddle
table {
border-collapse: collapse;
}
td {
width: 40px;
height: 10px;
border: 1px solid #999;
}
tr:hover {
background-color: #d7d7d7;
}
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
In other major browsers (IE, FF) it will highlight all other rows as expected.
Is this a chrome bug? Or feature? How to get all 3 major browsers behave the same?
If you get a cross-cursor when trying to reproduce, try again several times.
This is a bug I believe. Is there a use case in which you would need :hover to be triggered in this situation?
I'm trying to make a table that looks like the picture but i can't figure it out... This must be so easy question for you but I'm having trouble making this one work... can anyone help me? Please.
here is my current code for it:
<table width="100%" border="1">
<tr>
<th>Name of Candidates</th>
<th>Educational Attainment</th>
<th>Exprerience</th>
<th>In-Service Trainings & Seminars Attended</th>
<th>Eligibility</th>
<th>Other Qualifications</th>
<th>Interview</th>
<th>Total</th>
<th>Remarks</th>
</tr>
</table>
Use a combination of rowspan and colspan
example
The first row will contain all the cells that takes 2 rows and 1 cell that spreads on 4 columns (gray background on the example). The second row will contain the 4 cells under the cell that spreads on 4 cells.
<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table>
<tr>
<td></td>
<td></td>
<td colspan="7" rowspan="2"></td>
<td></td>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
</table>
Its good helper for dificult table generator.
http://html-tables.com/
Use colspan to increase width of a cell:
colspan="4"
Documentation colspan
Use rowspan to increase height of a cell:
rowspan="2"
Documentation rowspan
Here you go, use colspan to span multiple columns.
<table widtd="100%" border="1">
<tr>
<td>Name of Candidates</td>
<td colspan="4">Educational Attainment</td>
<td>Otder Qualifications</td>
<td>Interview</td>
<td>Total</td>
<td>Remarks</td>
</tr>
<tr>
<td>Name of Candidates</td>
<td>Educational Attainment</td>
<td>Exprerience</td>
<td>In-Service Trainings & Seminars Attended</td>
<td>Eligibility</td>
<td>Otder Qualifications</td>
<td>Interview</td>
<td>Total</td>
<td>Remarks</td>
</tr>
</table>
Similarly you could use rowspan for span multiple rows.
I want to write vertically in HTML table.In the last column, I want to the text "time table" to be displayed vertically. It should cover all the rows. Something like this:
L
U
N
C
H
How to do this ?
Here is the table i want to create.
<table style = "border-collapse: collapse" border = "1px">
<thead>
<tr>
<th colspan="6" align="center"> Time Table </th>
</tr>
<tr>
<th>DAY/TIME</th>
<th>8-9</th>
<th>9-10</th>
<th>10-11</th>
<th>11-12</th>
<th rowspan = "6" style="verticle-align: buttom">Lunch Break</th>
</tr>
<tr>
<th>Mon</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Tue</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Wed</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Thu</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Fri</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
</table>
Put your lunch break text inside a div and apply this css
word-wrap: break-word;width:11px;
Have a look at this jsfiddle demo
Add an id (or class) to the th you want vertical text in, and then you can add the following jQuery function - adds a line break after each character:
$(function() {
var html=$('#verticalText').html();
var newHtml='';
for (var i=0;i<html.length;i++) {
newHtml=newHtml+html[i];
newHtml=newHtml+'<br/>';
}
$('#verticalText').html(newHtml);
});
http://jsfiddle.net/K3Ab2/
(modified from Naor's answer to: Add line breaks after n numbers of letters in long words)
Use following HTML code
<table id="MyTable" style = "border-collapse: collapse" border = "1px">
Time Table
<tr>
<th>DAY/TIME</th>
<th>8-9</th>
<th>9-10</th>
<th>10-11</th>
<th>11-12</th>
<th rowspan = "6" id="vertical" style="verticle-align: buttom">Lunch Break</th>
</tr>
<tr>
<th>Mon</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Tue</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Wed</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Thu</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Fri</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
Use Following CSS
table#MyTable tr th#vertical {
width: 1.2em;
white-space: nowrap;
color: #000;
/*Firefox*/
-moz-transform: rotate(-90deg);
/*Safari*/
-webkit-transform: rotate(-90deg);
/*Opera*/
-o-transform: rotate(-90deg);
/*IE*/
writing-mode: tb-rl;
filter: flipv fliph;
border:1px black solid;
}
See this link