I have one question regarding the HTML tables that I couldn't manage to find myself.
Is it possible to create this layout using HTML and inline css within one table?
I tried to merge my cells in 4th row (I've started with 3 column layout) because I need 2 cells, and if my table width is 640px, and I force 320px for both cells, whole table gets messed up.
EDIT: 4th row is the issue, I need 2 equal width cells in it.
Thanks in advance.
<table border=1>
<tr>
<td colspan="4">Cell</td>
</tr>
<tr>
<td>Cell</td>
<td colspan="2">Cell</td>
<td>Cell</td>
</tr>
<tr>
<td colspan="4">Cell</td>
</tr>
<tr>
<td colspan="2">Cell</td>
<td colspan="2">Cell</td>
</tr>
</table>
All cells in the same column have to be the same width, so you need an extra column:
First row: one cell colspan=4
second row: one cell, on cell colspan=2, one cell
Third row: one cell colspan=4
Fourth row: one cell colspan=2, one cell colspan=2
The widths for each column then look something like:
Column 1 is narrow, let's say width=50px
Column 2 is 320 - column1's width, 280px
Column 3 same as 2, 280px
Column 4 same as 1, e.g. 50px
<table border="1">
<tr>
<td colspan="4">cell</td>
</tr>
<tr>
<td>cell</td>
<td colspan="2">cell</td>
<td>cell</td>
</tr>
<tr>
<td colspan="4">cell</td>
</tr>
<tr>
<td colspan="2">cell</td>
<td colspan="2">cell</td>
</tr>
</table>
<table border="1" width="100%">
<tr>
<td colspan="4">Cell</td>
</tr>
<tr>
<td width="10%">Cell</td>
<td colspan="2">Cell</td>
<td width="10%">Cell</td>
</tr>
<tr>
<td colspan="4">Cell</td>
</tr>
<tr>
<td colspan="2" width="50%">Cell</td>
<td colspan="2" width="50%">Cell</td>
</tr>
Check the DEMO
Use like this. it works
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
td{
text-align:center;
}
</style>
</head>
<body>
<table width="640" cellspacing="5">
<tr>
<td colspan="4">Cell</td>
</tr>
<tr>
<td>Cell</td>
<td colspan="2">Cell</td>
<td>Cell</td>
</tr>
<tr>
<td colspan="4">Cell</td>
</tr>
<tr>
<td colspan="2">Cell</td>
<td colspan="2">Cell</td>
</tr>
</table>
</body>
</html>
Related
If there is an overlapping join on different rows of the table, then the row may disappear:
<table border="1" bordercolor="#999" cellspacing="0px" cellpadding="2px" width="100%">
<tbody>
<tr>
<td rowspan="2">
<div>R1C1:R2C1 (row 1)</div>
</td>
<td>
<div>R1C2 (row 1)</div>
</td>
</tr>
<tr>
<td rowspan="2">
<div>R2C2:R3C2 (row 2)</div>
</td>
</tr>
<tr>
<td>
<div>R3C1 (row 3 should not be here)</div>
</td>
</tr>
</tbody>
</table>
This is unacceptable. May have to abandon the "table" tag. What to do?
It's not 100% clear what you mean. But I've removed the rowspan's and added colspan's to the code. Colspan will span your cell over multiple columns/cells.
More info can be found here:
https://www.w3schools.com/tags/att_td_colspan.asp
<table border="1" bordercolor="#999" cellspacing="0px" cellpadding="2px" width="100%">
<tbody>
<tr>
<td>
<div>R1C1:R2C1 (row 1)</div>
</td>
<td>
<div>R1C2 (row 1)</div>
</td>
</tr>
<tr>
<td colspan="2">
<div>R2C2:R3C2 (row 2)</div>
</td>
</tr>
<tr>
<td colspan="2">
<div>R3C1 (row 3)</div>
</td>
</tr>
</tbody>
</table>
You've included two td elements on the first row of your table, but only one td element on the second and third rows of your table, which will break your table layout - the browser doesn't know which column the cell is supposed to span. Fix this and your table should work.
There a couple of problems:
Table wrongly formatted (make sure the number of td matches, even if they are empty)
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Styles wrongly applied (apply them by using <style> or referencing a stylesheet)
<table style="color:white;background-color:black;">
Extra: Don't use so many divs
While there isn't exactly a problem with using the divs you are using, using too many of them will usually lead to bad practices.
You can use some CSS tricks to hide border of last column so that the table is aligned as per your requirement.
table td.last {
border-left: hidden;
border-top:hidden;
}
table td.last2 {
border-left: hidden;
border-bottom:hidden
}
<table border="1" bordercolor="#999" cellspacing="0px" cellpadding="2px" width="100%">
<tbody>
<tr>
<td rowspan="2">
<div>R1C1:R2C1 (row 1)</div>
</td>
<td colspan="2">
<div>R1C2 (row 1)</div>
</td>
</tr>
<tr>
<td rowspan="2" style="border-right:hidden">
<div>R2C2:R3C2 (row 2)</div>
</td>
<td class="last2"><br></td>
</tr>
<tr>
<td>
<div>R3C1 (row 3 should not be here)</div>
</td>
<td class="last"><br></td>
</tr>
</tbody>
</table>
I have a table structure like this
And the html structure is this
<table class="table table-bordered">
<thead>
<tr>
<th>Hierarchy</th>
<th>Operations</th>
</tr>
</thead>
<tbody>
<tr>
<td class="history-hierarchy" rowspan="4">
<div><!-- Tree structure is loaded here dynamically --></div>
</td>
</tr>
<tr>
<td class="history-text">
Equipment A700/005 is added.
</td>
</tr>
<tr>
<td class="history-text">
System instance SYSI/0002 is added.
</td>
</tr>
<tr>
<td class="history-text">
Equipment 7100/001 is replaced with 7100/002
</td>
</tr>
</tbody>
</table>
If you see the image, the Operations columns height is adjusting itself based on the Hierarchy columns height, I am looking for some way if possible to have the heights of operation column fixed say 10px and whatever space is left the last row's operation column should consume it.
So the operations column will not looke weird having so much height.
Is it possible?
the approach you are using is correct, you can use rowspan="2" on the last row as shown in my snippet.
table {height: 600px}
table td {border:1px solid red; vertical-align:top}
td.history-text {height: 20px}
<table class="table table-bordered">
<thead>
<tr>
<th>Hierarchy</th>
<th>Operations</th>
</tr>
</thead>
<tbody>
<tr>
<td class="history-hierarchy" rowspan="4">
<div>Tree structure is loaded here dynamically</div>
</td>
<td class="history-text">
Equipment A700/005 is added.
</td>
</tr>
<tr>
<td class="history-text">
System instance SYSI/0002 is added.
</td>
</tr>
<tr>
<td class="history-text" rowspan="2">
Equipment 7100/001 is replaced with 7100/002
</td>
</tr>
</tbody>
</table>
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/
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>