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>
Related
I'm totally stuck trying to figure out why setting a td width attribute in the following table is throwing off the display.
<table style="width:100%;">
<tbody>
<tr>
<td colspan="4">
<big><big><b>Investments By Bruce Wayne</b></big></big>
</td>
</tr>
<tr>
<td style="width:20%;"><b><u>Date</u></b></td>
<td style="width:20%;"><b><u>Invested</u></b></td>
<td style="width:30%;"><b><u>Company (and Round)</u></b></td>
<td style="width:30%;"><b><u>SPV</u></b></td>
</tr>
</tbody>
</table>
The above is rendered with the word "Invested" outside of the table entirely (see screenshot).
Any thoughts on why this might be happening? Thanks in advance!
<table style="width:100%;">
<tbody>
<tr>
<td colspan="4">
<big><big><b>Investments By Bruce Wayne</b></big></big>
</td>
</tr>
<tr>
<td style="width:20%;"><b><u>Date</u></b></td>
<td style="width:20%;"><b><u>Invested</u></b></td>
<td style="width:30%;"><b><u>SPV</u></b></td>
<td style="width:30%;"><b><u>Company (and Round)</u></b></td>
</tr>
</tbody>
</table>
Problem:
All you have to do is to format your code. There is a NON-BREAKING-SPACE between td and style <td style (the one with the Investment text) that destroys the layout. To reproduce you can delete the whitespace and add the whitespace again.
Note:
You have to <big><big> there wrapped - this can be reduced to just one element.
<table style="width:100%">
<tbody>
<tr>
<td colspan="4">
<big><b>Investments By Bruce Wayne</b></big>
</td>
</tr>
<tr>
<td style="width:20%;"><b><u>Date</u></b></td>
<td style="width:20%;"><b><u>Invested</u></b></td>
<td style="width:30%;"><b><u>Company (and Round)</u></b></td>
<td style="width:30%;"><b><u>SPV</u></b></td>
</tr>
</tbody>
</table>
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 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>
I'm trying to build a table like this:
Here is my solution:
<html>
<head>
</head>
<body>
<table border="1px">
<tr>
<td rowspan="6"></td>
<td rowspan="3"></td>
<td rowspan="2"></td>
</tr>
<tr><td rowspan="3"></td><td rowspan="2"></td></tr>
<tr><td rowspan="2"></td></tr>
</table>
</body>
</html>
It seems to be logical, but it doesn't work at any browser. Is there any way in HTML to build such table?
You only had 3 rows, so that was never going to work. As you defined your first cell with rowspan="6" then you need at least 6 rows.
You can layout the cells by imagining 6 rows across the diagram and then you can see which row a given cell starts. The following diagram shows the each cell in order of first encounter;
So the following code will produce that layout;
<html>
<head>
</head>
<body>
<table border="1px">
<tr>
<td rowspan="6"> </td> <!-- Box 1 -->
<td rowspan="3"> </td> <!-- Box 2 -->
<td rowspan="2"> </td> <!-- Box 3 -->
</tr>
<tr></tr>
<tr><td rowspan="2"> </td></tr> <!-- Box 4 -->
<tr><td rowspan="3"> </td></tr> <!-- Box 5 -->
<tr><td rowspan="2"> </td></tr> <!-- Box 6 -->
<tr></tr>
</table>
</body>
</html>
The s were so I could see the structure.
Hope this helps.
Try this instead:
<table style="border: 1px solid #999">
<tr>
<td rowspan="4"> </td>
<td rowspan="2"> </td>
<td> </td>
</tr>
<tr>
<td rowspan="2"> </td>
</tr>
<tr>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
jsFiddle example
You can stick with 6/3/2 rowspan, but you need to include the empty rows you are spanning. For example:
<table border="1px">
<tr>
<th rowspan="6">6</th>
<td rowspan="3">3</td>
<td rowspan="2">2</td>
</tr>
<tr><!-- empty row --></tr>
<tr><td rowspan="2">2</td></tr>
<tr><td rowspan="3">3</td></tr>
<tr><td rowspan="2">2</td></tr>
<tr><!-- empty row --></tr>
</table>
Fiddle riddle diddle
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>