I would to make a table with various and independent column count in each row. for example the first row has 2 column and the 2'nd row has 3 column. I tried this with the following code, but it's wrong:
<table summary="worker_resume_user_info" style="width:100%">
<tbody id="2">
<tr style="border:none">
<td colspan="12">
</td>
</tr>
<tr>
<td colspan="4">
1
</td>
<td colspan="4">
2
</td>
</tr>
</tbody>
</table>
How can I do this?
Pretty much, you were really close.
You just needed to make sure that your addition is correct. Your two column colspan added must equal your 3 column colspan added. In this example 6+6 = 4+4+4
<table border=1 summary="worker_resume_user_info" style="width:100%">
<tbody id="2">
<tr style="border:none">
<td colspan="6">6</td>
<td colspan="6">6</td>
</tr>
<tr>
<td colspan="4">4</td>
<td colspan="4">4</td>
<td colspan="4">4</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/zcjb23jo/
Not sure if this is what you are getting at but this table has 2 columns in the first row and 3 columns in the second row.
<table border="1">
<tr>
<td>
Column 1
</td>
<td colspan="2">
Column 2
</td>
</tr>
<tr>
<td>
Column 1
</td>
<td>
Column 2
</td>
<td>
Column 3
</td>
</tr>
</table>
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>
This is my problem:
<table border= '1' width= '100%' >
<tr>
<td> Apple </td>
<td> Banana </td>
<td> Strawberry </td>
</tr>
<tr>
<td> <table border='1' width= '100%'> </td>
<td> Healthy </td>
<td> Fruits </td>
<td> Banana </td>
</table>
</tr>
</table>
The second row is only one column wide but I want it to be three columns wide. And from what I tested colspan doesnt work on the nested table.
Is it even possible to do what I want?
It's not totally clear what the layout needs to be but once you fix the html structure so cell holding nested table is closed properly, and it's cells have <tr> and add some colspans the following should get you close to what you want.
Note that nesting tables is not used a lot any more. It is very old school
<table border='1' width='100%'>
<tr>
<td> Apple </td>
<td> Banana </td>
<td> Strawberry </td>
</tr>
<tr>
<td colspan='2'>
<table border='1' width='100%'>
<tr>
<td> Healthy </td>
<td> Fruits </td>
<td> Banana </td>
</tr>
</table>
</td>
<td>Last Cell</td>
</tr>
</table>
I'm very new to HTML. I have an HTML document that is built using a 2 column table. I am now needing to set up a row with 3 columns. From the research that I've done, it seems that I can't just add a column to 1 row, rather I need to work with a 3 column table and use colspan in the other rows to make things work. Is that correct?
I've tried adjusting the existing colspans from =2 to =3 and adding a new column to the desired row but to no avail. Can you tell me what is wrong with my approach or how to properly convert the existing 2 column table to a 3 column structure?
<table width="768" border="0" align="center" cellpadding="0" cellspacing="0" style="border:1px solid #000000" >
<tr>
<td colspan="2" width="768" height="160" border="0" style="display:inline" /></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td width="256"></td>
<td width="256"></td>
<td width="256"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
<table border="1">
<tr> <!-- row with 3 columns -->
<td>1x1</td>
<td>1x2</td>
<td>1x3</td>
</tr>
<tr> <!-- row with only 2 columns, where the second column is as wide as the second and third column, above -->
<td>2x1</td>
<td colspan="2">2x2</td>
</tr>
</table>
This is how to get a table with N rows and 3 columns. Is it what you were asking for? It would be useful if you could paste some code!
See this page to learn more about colspan:
http://www.w3schools.com/tags/att_td_colspan.asp
EDIT:
In your code you have written the table to display only 2 columns for every row.
You have to add a <td> tag to display another column per row.
I don't have much experience with html, but I tried to make a simple table and I get extra cells in it, I don't know why.
Here is the code:
<table border="1">
<tr>
<td colspan="5"> hi <td>
<td colspan="3"> hi <td>
</tr>
<tr>
<td colspan="3"> hi <td>
<td colspan="5"> hi <td>
</tr>
</table>
I expect this to have two rows with 2 cells in each, in first row first cell is bigger, and in second row second cell is bigger. But for some reason I get 4 cells in each row, like this:
.
You didn't terminate your <td>.... You need a </td> at the end.
Working Fiddle
http://jsfiddle.net/GFdP6/3/
<table border="1">
<tr>
<td colspan="5"> hi </td>
<td colspan="3"> hi </td>
</tr>
<tr>
<td colspan="3"> hi </td>
<td colspan="5"> hi </td>
</tr>
</table>
Furthermore
If you want it to look like you'd expect, you will have to set some widths on your td's like I did in the fiddle.
You have used TD Start Tags when you want TD End Tags. So you have 4 TD elements in each row instead of 2. (Note that the end tag for TD is optional so this is valid).
It's a typo... The closing TD tags are missing.
<table border="1">
<tr>
<td colspan="5"> hi --> close your tags here --> </td>
<td colspan="3"> hi </td>
</tr>
<tr>
<td colspan="3"> hi </td>
<td colspan="5"> hi </td>
</tr>
</table>
Missing closing tags for <td>.
<table border="1">
<tr>
<td colspan="5"> hi </td>
<td colspan="3"> hi </td>
</tr>
<tr>
<td colspan="3"> hi </td>
<td colspan="5"> hi </td>
</tr>
</table>
How can I align all table rows come correctly aligned even if they have content length differences.
Here is the fiddle. Please have a look at this.. They are coming vertically aligned.. But I want them one after another like below
One 1 Yes
Two 2
Three
http://jsfiddle.net/cKj98/1/
vertical-align: top;
?
Do something like this:
<table>
<tr>
<td width="50px">
One
</td>
<td>
1
</td>
<td>
Yes
</td>
</tr>
<tr>
<td width="50px">
Two
</td>
<td colspan="2">
2
</td>
</tr>
<tr>
<td colspan="3">
Three
</td>
</tr>
</table>
Good ways to style the table cells are: "padding", "text-align", vertical-align", "height", "width", and so on..
This might be what you seek
<table>
<tr>
<td>
One
</td>
<td>
1
</td>
<td>
Yes
</td>
</tr>
<tr>
<td>
Two
</td>
<td colspan='2'>
2
</td>
</tr>
<tr>
<td colspan='3'>
Three
</td>
</tr>
<table>