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>
Related
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>
I have following table:
I can't make To and from columns to be equal - they should be half of row. I tried many different colspan cases, but these tds are not half of row.
How could I do that?
<table>
<tr>
<td colspan="5">
some text
<br>
</td>
<td colspan="6">
another text
<br>
</td>
<td colspan="6">
Logo
<br>
</td>
</tr>
<tr>
<td colspan="8"> </td>
</tr>
<tr>
<td style="position: relative; font-size: 13px;" colspan="12">
some text
</td>
</tr>
<tr style="height:30px;">
<td> </td>
</tr>
<tr>
<td colspan="6">
<?php echo 'To');?>:</td>
<td colspan="6">
<?php echo 'From';?>:</td>
</tr>
First of all you need to understand the colspan property. colspan is used to manage the span of child col with respect to parent. This means if first has three and next has ONE , it means it needs colspan TWO to get in line with parent. You can find this by border='1' property to table
See here
<table border="1">
<tr>
<td>
some text
<br>
</td>
<td >
another text
<br>
</td>
<td>
Logo
<br>
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td style="position: relative; font-size: 13px;" colspan="3">
some text
</td>
</tr>
<tr style="height:30px;">
<td colspan="3"> </td>
</tr>
<tr>
<td><?php echo 'To');?>:</td>
<td colspan="2">
<?php echo 'From';?>:</td>
</tr>
Above you cans see my max colspan is THREE since the first has three rows
Check this fiddle http://jsfiddle.net/anandgh/y1gsqeq6/
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/
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>