I am working on my project at the moment, so I tried to create a time table but the problem is when I go to merge two or more cells it would ruin the entire layout and creating an extra cell on the right hand side.
I dont know how to add the code, but please click on the links so you can see what I am talking about.
https://gyazo.com/2d3367a8c79f42d5b2e44a3182f10c20
https://gyazo.com/4c8a396173ee8282649a2cca846eaeee
When you go to merge two or more cells in a column you mast delete the cell in a neighbor row.
When you go to merge two or more cells in a row you mast delete the cell in the same row.
<table border="1" width="100%">
<tr>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
// <td> </td> this is for delete
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<table border="1" width="100%">
<tr>
<td colspan="2"> </td>
<td> </td>
// <td> </td> this is for delete
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Related
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 have the following table, with two header cells. The second header cell needs to be split into two rows, with the bottom row split further into 6 columns (q1, q2, q3 etc). These columns should be the same width as those in the row below them. Please see the image and fiddle to see what I am trying to achieve. Any help would be great.
http://jsfiddle.net/CPSs9/
Fiddle here http://jsfiddle.net/CPSs9/
My code is as follows:
<table border="1" bordercolor="black" cellspacing="0">
<tr>
<th width="120">Booboo</th>
<th colspan="5">blah blah</th>
</tr>
<tr>
<td> </td>
<td width="40"> </td>
<td width="40"> </td>
<td width="40"> </td>
<td width="40"> </td>
<td width="40"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
It is very easy. All you need to do is use the rowspan attribute on the first th and add another row to the table. Like so: http://jsfiddle.net/skip405/CPSs9/1/
Every time I render the HTML the divs are pushed out of the table.
What is the proper way to get the same behavior as divs? I am trying to hide chunks of a table using jQuery.
Follow This Format:
<table width="200" border="1">
<tr id="1">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="2">
<td> </td>
<td> </td>
<td> </td>
</tr>
<DIV>EXPANDING UPON ROW 2 AT BLOCK LEVEL But UN-effecting ROW 1 AND 3</DIV>
<tr id="3">
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
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>