I'm trying to make a table in html, using fixed sizes and column spanning.
Here is the code I am working with:
<table style="width:602px;" border="1" cellspacing="0">
<tr>
<td style="height:148px; width:298px;" colspan="2"></td>
<td style="height:148px; width:298px;" colspan="2"></td>
</tr>
<tr>
<td style="height:148px; width:148px;"></td>
<td style="height:148px; width:298px;" colspan="2">content</td>
<td style="height:148px; width:148px;"></td>
</tr>
<tr>
<td style="height:148px; width:148px;"></td>
<td style="height:148px; width:298px;" colspan="2"></td>
<td style="height:148px; width:148px;"></td>
</tr>
<tr>
<td style="height:148px; width:148px;"></td>
<td style="height:148px; width:298px;" colspan="2"></td>
<td style="height:148px; width:148px;"></td>
</tr>
</table>
This works as I expect on chrome (creating 2 double length cells in the first row, and then three rows of single-double-single length cells). However, in IE8 the middle cell in the bottom 3 cells is sized to fit the "content", not to the size I defined.
Am I doing something wrong, and how should I change this to make it work as I want? Is there a better way to do what I'm trying to do?
Remove your table width, and you'll see how your table behave...
Yes, all your columns are trying to be 298px wide. This is because a table try to fit its column width with its first row... Remove the useless declaration and try this :
<table border="1" cellspacing="0">
<tr>
<td style="height:148px;" colspan="2">1fdasfsdafsdfas</td>
<td colspan="2">1</td>
</tr>
<tr>
<td style="height:148px; width:148px;">1</td>
<td style="width:298px;" colspan="2">1</td>
<td style="width:148px;">1</td>
</tr>
<tr>
<td style="height:148px;">1</td>
<td colspan="2">1</td>
<td>1</td>
</tr>
<tr>
<td style="height:148px;">1</td>
<td colspan="2">1</td>
<td>1</td>
</tr>
</table>
Related
When I use **collspan=2 **on the cell 28 the table doesn't have a good view and my expectation is merge cell 28 and 29 without breaking.
<table width="100%" border="2">
<tr>
<td colspan="2" rowspan="2">1</td>
<td colspan="2">3</td>
<td colspan="2">5</td>
</tr>
<tr>
<td colspan="2" rowspan="2">9</td>
<td colspan="2" rowspan="2">11</td>
</tr>
<tr>
<td>13</td>
<td rowspan="3">14</td>
</tr>
<tr>
<td rowspan="3">19</td>
<td rowspan="3">21</td>
<td colspan="2">22</td>
<td>24</td>
</tr>
<tr>
<td rowspan="2">28</td>
<td rowspan="2">29</td>
<td rowspan="2">30</td>
</tr>
<tr>
<td>32</td>
</tr>
</table>
Simple typo. you tried collspan, but it's colspan.
the full table row should look like this:
<tr>
<td rowspan="2" colspan="2">28 + 29</td>
<td rowspan="2">30</td>
</tr>
A word of advice from a very old coder:
learning this level of table trickery was important in 1999,
bevor CSS and flexbox and grid came along.
Now it's irrelevant.
Please check the image #epascarello #bjelli
So I am trying to split cells in a table using colspan but I am seeing some odd behavior. In the code bellow the first table does not render as expected.
In particular the row with the 1/4 and 1/2 column are not spanning to 2x25% occupancy and then one that uses the remainder space, and this messes up the proper spanning of the 1/3 cells and 1/2 cells... On the other the second table looks as expected.
I am not sure if this is a bug in Chrome?? it seems to have also hill behavior in IE9, am i missing something here? Is there a better method to get this done?
You can see live version of code at: https://jsfiddle.net/4xwm33n6/
Unexpected alignment:
<table border="1" align="center" cellspacing="0" width="400px">
<tr >
<td colspan="100%" align="center">1/1</td>
</tr>
<tr>
<td colspan="33.33%" align="center">1/3</td>
<td colspan="33.33%" align="center">1/3</td>
<td colspan="33.33%" align="center">1/3</td>
</tr>
<tr>
<td colspan="25%" align="center">1/4</td>
<td colspan="25%" align="center">1/4</td>
<td colspan="50%" align="center">1/2</td>
</tr>
<tr>
<td colspan="50%" align="center">1/2</td>
<td colspan="50%" align="center">1/2</td>
</tr>
</table>
This works (but two 1/4 cannot be merged as one):
<table border="1" align="center" cellspacing="0" width="400px">
<tr >
<td colspan="100%" align="center">1/1</td>
</tr>
<tr>
<td colspan="33.33%" align="center">1/3</td>
<td colspan="33.33%" align="center">1/3</td>
<td colspan="33.33%" align="center">1/3</td>
</tr>
<tr>
<td colspan="25%" align="center">1/4</td>
<td colspan="25%" align="center">1/4</td>
<td colspan="25%" align="center">1/4</td>
<td colspan="25%" align="center">1/4</td>
</tr>
<tr>
<td colspan="50%" align="center">1/2</td>
<td colspan="50%" align="center">1/2</td>
</tr>
</table>
To do what you want to do you need something along the lines of:
<table>
<tr>
<td colspan="12">1/1</td>
</tr>
<tr>
<td colspan="6">1/2</td>
<td colspan="6">1/2</td>
</tr>
<tr>
<td colspan="4">1/3</td>
<td colspan="4">1/3</td>
<td colspan="4">1/3</td>
</tr>
<tr>
<td colspan="3">1/4</td>
<td colspan="3">1/4</td>
<td colspan="3">1/4</td>
<td colspan="3">1/4</td>
</tr>
</table>
This way you can combine the number of cells you need. By the way I got the 12 by using the lowest common multiple of 4 and 3...
Sorry for wrote comment like answer, I can't comment this post :(
colspan mean how many cells You want to merge, not width. You can't set width in colspan.
You should use colspan="#" using a number not a percent.
For example, if you want a td to go across two columns, use colspan="2"
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan="2">4</td>
<td>5</td>
</tr>
</table>
https://jsfiddle.net/xxurc50n/1/
<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.
I'm having this little table of mine, which doesn't seem to work. The CSS will tell all about what height and width I want. Do I do this in a wrong way or what am I missing in this?
And why aren't all the borders aligned?
The table, html and CSS can be seen in this jsfiddle:
http://jsfiddle.net/YaKCT/
<table class="stamtavle">
<tr>
<td rowspan=7 class="cell1"><p>Volstrups Casillas</p></td>
</tr>
<tr>
<td rowspan=3 class="cell2"><p>Colman</p></td>
</tr>
<tr>
<td class="cell3"><p>Carthago Z</p></td>
</tr>
<tr>
<td class="cell3"><p>Rosenquarz</p></td>
</tr>
<tr>
<td rowspan=3 class="cell2"><p>Lucille</p></td>
</tr>
<tr>
<td class="cell3"><p>Lordship</p></td>
</tr>
<tr>
<td class="cell3"><p>Carna</p></td>
</tr>
<tr>
<td rowspan=7 class="cell1"><p>Volstrups Corona</p></td>
</tr>
<tr>
<td rowspan=3 class="cell2"><p>Churchill</p></td>
</tr>
<tr>
<td class="cell2"><p>Cicero</p></td>
</tr>
<tr>
<td class="cell3"><p>Ziska</p></td>
</tr>
<tr>
<td rowspan=3 class="cell2"><p>Volstrups Cartia</p></td>
</tr>
<tr>
<td class="cell3"><p>Calato Z</p></td>
</tr>
<tr>
<td class="cell3"><p>Sidsel</p></td>
</tr>
</table>
Add this to your table tag
class="stamtavle" cellpadding="0" cellspacing="0"
I think you'd need a different approach to make the spacing between cells work how it was before due to your rowspan layout. This does neaten everything up though.
I am new to HTML and CSS designs. I have the below code.
<html>
<body>
<table width="100%">
<tr>
<td width="25%"> </td>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%"></td>
</tr>
<tr>
<td >wqewqehkjfoiw</td>
<td >abcdefdsfds</td>
<td >sdfdsfdsfdsf</td>
<td >dsfsdfdsfdsfsdweqw</td>
</tr>
<tr>
<td width="34%">wqewqehkjfoiw</td>
<td width="33%">abcdefdsfds</td>
<td width="33%">sdfdsfdsfdsf</td>
</tr>
</table>
</body>
</html>
The first and second rows have 4 tds of equal width. Now on third row, i wanted to have 3tds with equal width. But it is not working with the above code. Pls help
You should consider using a grid system (like http://960.gs/) instead of tables.
If you still want to use tables, use the colspan attribute:
<html>
<body>
<table width="100%">
<tr>
<td colspan="3" width="25%"> </td>
<td colspan="3" width="25%"></td>
<td colspan="3" width="25%"></td>
<td colspan="3" width="25%"></td>
</tr>
<tr>
<td colspan="4" width="33%">wqewqehkjfoiw</td>
<td colspan="4" width="33%">>abcdefdsfds</td>
<td colspan="4" width="33%">>sdfdsfdsfdsf</td>
</tr>
</table>
</body>
</html>
The table above has 12 columns, so for N tds, use colspan="12/N".
<table width="100%" border="5">
<tr>
<td colspan="25%"> </td>
<td colspan="25%"></td>
<td colspan="25%"></td>
<td colspan="25%"></td>
</tr>
<tr>
<td colspan="25%">wqewqehkjfoiw</td>
<td colspan="25%">abcdefdsfds</td>
<td colspan="25%">sdfdsfdsfdsf</td>
<td colspan="25%">dsfsdfdsfdsfsdweqw</td>
</tr>
<tr>
<td colspan="34%">wqewqehkjfoiw</td>
<td colspan="33%">abcdefdsfds</td>
<td colspan="33%">sdfdsfdsfdsf</td>
</tr>
</table>
The way you tried won’t work because it does not correspond to the HTML table model, or any logical table structure. What browsers do in practice is (as you probably noticed) that they treat the row with three cells as if it had a fourth, empty cell. And then they more or less ignore the conflicting width settings.
Among the possible workarounds, the cleanest (and most common) is probably the use of nested tables. You would replace the last row cells by a single cell that spans all the four columns and contains an inner one-row table. The last row could thus be:
<tr>
<td colspan=4>
<table width=100%>
<tr>
<td width="34%">wqewqehkjfoiw</td>
<td width="33%">abcdefdsfds</td>
<td width="33%">sdfdsfdsfdsf</td>
</tr>
</table>
</td>
</tr>