I want to achieve this:
and I did these with <td> tag but only col span is working correctly
<tr>
<td><input type="checkbox"></td>
<td>hu043</td>
<td>7903</td>
<td>90df78</td>
</tr>
<tr>
<tr>
<td colspan="4" rowspan="4"> </td>
</tr>
The purpose of rowspan is to span existing rows, like you are spanning existing columns in your example.
If you will add some rows below, you will see it.
<tr>
<td colspan="4" rowspan="4"> </td>
</tr>
<tr style='height:20px;'></tr>
<tr style='height:20px;'></tr>
<tr style='height:20px;'></tr>
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 am trying to add a row with double height to that of other row. But unable to make. Not sure what is wrong.
<table border="1">
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
</tr>
<tr>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</table>
You'll need some css to set the height of the row;
table td, tr {
height: 30px;
}
table td, tr {
height: 30px;
}
<table border="1">
<tbody>
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
</tr>
<tr>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</tbody>
</table>
Note; You should add a tbody to your table; What is the purpose for HTML's tbody?
Are you trying to do that ?
<table border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td rowspan="2">A4/B4 <br>(2 rows)</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
<tr>
<td>C1</td>
<td colspan="2">C2/C3 <br>(2 cols)</td>
<td>C4</td>
</tr>
</table>
The rowspan property should only be used if you are trying to have one cell appear across two rows (as if you are using the Merge Cells functionality on Excel). If you want to make one row twice as high as the other, this is a display property and should be done with css or inline styling. The middle (row) should also be removed.
If this is just a general example and you need to use it on something more complex. If you use rowspan on say 1 element, you will need to make sure that the following row has 1 less td element otherwise it will not display correctly.
<table border="1">
<tr style="height: 50px">
<td >A1</td>
<td >A2</td>
<td >A3</td>
<td >A4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</table>
How I close this gap between the inner table and the main table cell?
https://jsfiddle.net/w7eekbcL/2/
<td>
<table style="width:100%">
<tr>
<td colspan="2" style="font-family:verdana; color:#424242">main list</td>
</tr>
<tr>
<td colspan="2">list</td>
</tr>
<tr>
<td colspan="2">• one</td>
</tr>
<tr>
<td colspan="2">• second</td>
</tr>
<tr>
<td colspan="2">• thurd</td>
</tr>
</table>
</td>
For example I tried to use text-aligment but the result is the same.
Add vertical-align: top to the td that contains the 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 am trying to format a table to look like this...
Basically i want the "Dates" row to have two columns inside it (to and from) both of them 50% the width of dates...but however when i try to format it. "To" takes all of date and "From" takes all of Name. they arent locked under "Dates"
Any help will be appreciated...Thank you
<th width="100%">Dates</th><th>Name</th><th>Age</th>
<tr>
<tr>
<td width="50%">To</td>
<td width="50%">From</td>
</tr>
</tr>
Change
<table border="1">
<tr class="heading"> <td colspan="6">Information</td> </tr >
<th width ="15" colspan="2">Dates</th><th> Name</th><th>Age</th>
<tr>
<tr>
<td width="2">From</td>
<td width="2">To</td>
<td></td>
<td></td>
</tr>
<tr>
<td width="5">
<input type="text" class="input" name="1fdate" /></td>
<td width="2">
<input type="text" class="input" name="1fdate" /></td>
</tr>
</tr>
</table>
I hope this is what you need. You use colspan and rowspan to merge the cells. When you set colspan to "2" in Date cell, it spans the row with two cells (or colums). And you set also rowspan of the cells next to Date to "2" so that they will span the rows taken by whole Date section.
<table width="600" border="0">
<tr>
<th width="200" colspan="2" scope="col">Date</th>
<th width="200" rowspan="2" scope="col">Name</th>
<th width="200" rowspan="2" scope="col">Age</th>
</tr>
<tr>
<th width="100">To</th>
<th width="100">From</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Change
<th width="100%">Dates</th>
to have colspan value. Like
<th colspan="2">Dates</th>
Replace first line with below
<th width="100%" colspan="2">Dates</th><th>Name</th><th>Age</th>