Just like how in the image I linked "tache1" and "tache2" in the 4th row are splitting "Mercredi" in two
<table width="400" border="2" cellspacing="1" cellpadding="1">
<tr>
<th width="15%" rowspan="2">Equipes</th>
<th width="70%" colspan="5">Janvier</th>
<td width="15%" rowspan="2"></td>
</tr>
<tr>
<th>Lundi</th>
<th>Mardi</th>
<th>Mercredi</th>
<th>Jeudi</th>
<th>Vendredi</th>
</tr>
<tr>
<td rowspan="2">Equipe1</td>
<td colspan="3">tache1</td>
<td colspan="2">tache2</td>
<td rowspan="2">Semaine1</td>
</tr>
<tr>
<td colspan="2">tache1</td>
<td colspan="3">tache2</td>
</tr>
</table>
Use 6 colspan instead of 5 in <th width="70%" colspan="6">Janvier</th> Then use 2 colspan for Mercredi like this <th colspan="2">Mercredi</th> Then use 3 colspan for each tache like this
<td colspan="3">tache1</td>
<td colspan="3">tache2</td>
Also In your setup, Equip1 is taking 2 rows but its content to the right take only 1 row.
so use rowspan"1" for both Equipe1 and 2.
<table width="600" border="2" cellspacing="1" cellpadding="1">
<tr>
<th width="15%" rowspan="2">Equipes</th>
<th width="70%" colspan="6">Janvier</th>
<td width="15%" rowspan="2"></td>
</tr>
<tr>
<th>Lundi</th>
<th>Mardi</th>
<th colspan="2">Mercredi</th>
<th>Jeudi</th>
<th>Vendredi</th>
</tr>
<tr>
<td rowspan="1">Equipe1</td>
<td colspan="3">tache1</td>
<td colspan="3">tache2</td>
<td rowspan="2">Semaine1</td>
</tr>
<tr>
<td rowspan="1">Equipe2</td>
<td colspan="3">tache1</td>
<td colspan="3">tache2</td>
</tr>
</table>
Related
Highlighted cells should be same width
<table class="tg">
<thead>
<tr>
<th class="tg-baqh" colspan="5">Graduate People</th>
<th class="tg-baqh" colspan="4">Uneducated People</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0lax">City</td>
<td class="tg-baqh">Male</td>
<td class="tg-baqh">Female</td>
<td class="tg-baqh">Trangender</td>
<td class="tg-baqh">Total</td>
<td class="tg-baqh">Male</td>
<td class="tg-baqh">Female</td>
<td class="tg-baqh">Trangender</td>
<td class="tg-baqh">Total</td>
</tr>
<tr>
<td class="tg-0lax">Delhi</td>
<td class="tg-baqh">3000</td>
<td class="tg-baqh">3000</td>
<td class="tg-baqh">200</td>
<td class="tg-baqh">6200</td>
<td class="tg-baqh">1000</td>
<td class="tg-baqh">1000</td>
<td class="tg-baqh">100</td>
<td class="tg-baqh">2200</td>
</tr>
<tr>
<td class="tg-0lax">Mumbai</td>
<td class="tg-baqh">4000</td>
<td class="tg-baqh">4000</td>
<td class="tg-baqh">500</td>
<td class="tg-baqh">8500</td>
<td class="tg-baqh">1400</td>
<td class="tg-baqh">600</td>
<td class="tg-baqh">50</td>
<td class="tg-baqh">2050</td>
</tr>
</tbody>
</table>
I used "table-layout: fixed;" but not get the expected output. Cell content should be the same width as per the transgender data cell.
I want to insert a full width row as shown in the below image by Arrow
I have tried colspan, rowspan but did not work for me so removed from question (otherwise question will mess up).
here is what i have tried: https://jsfiddle.net/eabangalore/y3Lt470z/16/
table td {
padding: 5px;
}
<table width="500px" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="width:3%"></th>
<th style="width:10%">Name</th>
<th style="width:10%">Age</th>
<th style="width:10%">Designation</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style="width:50px;height:70px;border-radius:50%;">
<img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/>
</div>
</td>
<td align="center">Alpha</td>
<td align="center">21 year</td>
<td align="center">Software</td>
</tr>
<tr>
<td>
<div style="width:50px;height:70px;border-radius:50%;">
<img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/>
</div>
</td>
<td align="center">Alpha</td>
<td align="center">21 year</td>
<td align="center">Software</td>
</tr>
</tbody>
</table>
Qusetion: i want to add a full-width row as shown by arrow in red color area (above image)
Note: i cannot change table into divs as i'm working on maintenance project.
You looking for this table structure. You have to use once rowspan and once colspan.
<table width="500px" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="width:3%"></th>
<th style="width:10%">Name</th>
<th style="width:10%">Age</th>
<th style="width:10%">Designation</th>
</tr>
</thead>
<tr>
<th class="" rowspan="2">
<img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/>
</th>
<th class="">1</th>
<th class="">2</th>
<th class="">3</th>
</tr>
<tr>
<td class="" colspan="4">new row</td>
</tr>
<tr>
<th class="" rowspan="2">
<img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/>
</th>
<th class="">a</th>
<th class="">b</th>
<th class="">c</th>
</tr>
<tr>
<td class="" colspan="4">new row</td>
</tr>
</table>
Small Note: use instead inline style classes.
I would like for top 4 elements to stretch across the top, and bottom two to also look like they belong to the same table, stretch and not be so squeezed. Can I accomplish this without adding empty <td>s?
This is how it looks like right now:
http://www.w3schools.com/code/tryit.asp?filename=F0OOEL3HH55Y
My code:
<table cellspacing="2" cellpadding="2" width="650" border="0">
<tr>
<td height="8" class="header" width="300">Weight Per Book (lb.)</td>
<td height="8" class="header" width="300">Cost per Book</td>
<td height="8" class="header" width="200">Quantity for whole order</td>
<td height="8" class="header" width="400">Capability Complexity Level For TO</td>
</tr>
<tr>
<td height="16">2.0</td>
<td height="16">0.00</td>
<td height="16">0</td>
<td height="16">4</td>
</tr>
<tr valign="bottom">
<td class="header">Distribute ID Order to Home Plant</td>
<td class="header">Distribute All OTR's to Home Plant</td>
</tr>
<tr>
<td>No</td>
<td>No</td>
</tr>
</table>
You can use the colspan attribute to do that. This attribute define the number of columns a particular cell should span.
Here is an example:
<table cellspacing="2" cellpadding="2" width="650" border="0">
<tr>
<th colspan="4">Production</th>
</tr>
<tr>
<td height="8" class="header" width="300">Weight Per Book (lb.)</td>
<td height="8" class="header" width="300">Cost per Book</td>
<td height="8" class="header" width="200">Quantity for whole order</td>
<td height="8" class="header" width="400">Capability Complexity Level For TO</td>
</tr>
<tr>
<td height="16">2.0</td>
<td height="16">0.00</td>
<td height="16">0</td>
<td height="16">4</td>
</tr>
<tr valign="bottom">
<td colspan="2" class="header">Distribute ID Order to Home Plant</td>
<td colspan="2" class="header">Distribute All OTR's to Home Plant</td>
</tr>
<tr>
<td colspan="2">No</td>
<td colspan="2">No</td>
</tr>
</table>
Hope this helps!
I've added a table inside a table.
<tr>
<td colspan="10">
<table border="2" cellpadding="1" cellspacing="1">
<tr>
<td>col1 </td>
<td>col2</td>
</tr>
<tr >
<td >TEST </td>
<td >33444</td>
</tr>
<tr >
<td >TEST</td>
<td >9900</td>
</tr>
</table>
</td>
</tr>
But I want "TEST" values under col1 and numeric values under col2. Currently all values are shown under col1.
Edit - Actual Code
<tr>
<td colspan="10">
<table class='<%= "table"+count%>' style="display:none" border="2" cellpadding="1" cellspacing="1">
<tr>
<td>col1 </td>
<td>col2</td>
</tr>
<nested:iterate property="equipC" id="equipmentFormBean" indexId="ffIndex" >
<tr class='<%= "table"+count%> dataOff' style="display:none">
<td align="right" ><nested:write property="equipInitial" /> </td>
<td ><nested:write property="equipNum" /> </td>
</tr>
</nested:iterate>
</table>
</td>
</tr>
How to do it?
Use Google chrome...Your html code is right.On my PC I see the values are in COL2.
Use Forgot to use table heading heading tag "th"
<tr>
<td colspan="10">
<table border="2" cellpadding="1" cellspacing="1">
<tr>
<th>col1 </th>
<th>col2</th>
</tr>
<tr >
<td >TEST </td>
<td >33444</td>
</tr>
<tr >
<td >TEST</td>
<td >9900</td>
</tr>
</table>
</td>
</tr>
Your HTML code is correct. With the html provided by you it displayed the tables properly. You may please see it here # FIDDLE - http://jsfiddle.net/BRxKX/4986/
Problem could be with dynamic generation of tables and mostly around COLSPAN if at all its being used in your dynamic code.
Here is code that I tested (you can see this in - http://jsfiddle.net/BRxKX/4986/)
<html>
<head>
</head>
<body>
<table>
<tr>
<td colspan="10">
<table border="2" cellpadding="1" cellspacing="1">
<tr>
<td>col1 </td>
<td>col2</td>
</tr>
<tr >
<td >TEST </td>
<td >33444</td>
</tr>
<tr >
<td >TEST</td>
<td >9900</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<html>
<body>
<table align="left" border="0" cellpadding="1" cellspacing="1" style="width: 1000px;">
<tbody>
<tr>
<td width="300">Hanrathsingel 14</td>
<td width="300">Home</td>
<td width="400" height="100%">This one has to take the full height of the table</td>
</tr>
<tr>
<td width="300">1252 AE Laren</td>
<td width="300">Wie zijn wij</td>
</tr>
<tr>
<td width="300">T. 035-6231419</td>
<td width="300">Informatie</td>
</tr>
<tr>
<td width="300">M. 06-21700357</td>
<td width="300">Algemene Voorwaarden</td>
</tr>
<tr>
<td width="300">laren#qualitysites4all.com</td>
<td width="300">Contact</td>
</tr>
</tbody>
</table>
</body>
</html>
How do I get the column to be 100% of the table height but the other columns must keep their height?
Because I want to put a widget in there but I have to work in my boss his cms and I am not allowed to make new divs :(
Try rowspan:
<table align="left" border="0" cellpadding="1" cellspacing="1" style="width: 1000px;">
<tbody>
<tr>
<td width="300">Hanrathsingel 14</td>
<td width="300">Home</td>
<td width="400" rowspan="5">This one has to take the full height of the table</td>
</tr>
<tr>
<td width="300">1252 AE Laren</td>
<td width="300">Wie zijn wij</td>
</tr>
<tr>
<td width="300">T. 035-6231419</td>
<td width="300">Informatie</td>
</tr>
<tr>
<td width="300">M. 06-21700357</td>
<td width="300">Algemene Voorwaarden</td>
</tr>
<tr>
<td width="300">laren#qualitysites4all.com</td>
<td width="300">Contact</td>
</tr>
</tbody>
</table>
Example
JSFiddle Example
Use rowspan="5" in that TD.
Rowspan attribute, tells your element to "get the height" of 5 rows in this case.
If you have dinamic content remember to update this value to the actual number of rows of your table.