Im trying to merge cells 1+2+3
I have already done so with the current code
<td rowspan="2" colspan="2"> 1</td>
Ive then left the 2nd row blank to allow for this.
<tr> </tr>
Somehow this fails and it also removes a row as there should be 7 in total.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<table width="100%" border="1">
<tbody>
<tr>
<td rowspan="4" colspan="2"> </td>
<td rowspan="2" colspan="2"> 1</td>
</tr>
<tr> </tr>
<tr>
<td> 2</td>
<td> 3</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> Name</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> Age</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> Cost</td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<body>
</body>
</html>
Here's a thing with rowspan, if you look at this code, it has the same structure as yours, only I merged 1,2,3
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
<body>
<table width="100%">
<tr>
<td rowspan="3">
big
</td>
<td colspan="2" rowspan="2" >
1
</td>
</tr>
<tr>
</tr>
<tr>
<td>
3
</td>
<td>4</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
</body>
</html>
Once I did the rowspan, 1,2,3 merged into what looks like a single row, although in reality it's two rows.
This is another example. I do the rowspan exactly as I did in the first example, I simply added another column to the right (x).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
<body>
<table width="100%">
<tr>
<td rowspan="3">
big
</td>
<td colspan="2" rowspan="2">
1
</td>
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<tr>
<td>
3
</td>
<td>4</td>
<td>x</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>x</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>x</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>x</td>
</tr>
</table>
</body>
</html>
Now the table looks exactly as you would expect it, but only because the "x" column holds it together. Without the "x" column, the table loses the desired look although it is exactly what you want it to look like. if you for example add Height="50px" in the first example to your 2nd <td>
<td colspan="2" rowspan="2" Height="50px">
1
</td>
This will make your table look exactly as you expect it.
Or you could add another column like I did in the 2nd example and simply hide it.
Related
Table Prtscn
I need to create such a table in HTML Without the use of CSS
I have been trying for several hours to create this table, but without success, Would appreciate help :)
I enclose the code I was working on.
I am attaching a picture
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1"width="400">
<tr>
<td>Hello world</td>
<table border="1"width="400">
<td>
<table border="2" cellpadding="1"celspaceing="2">
<tr>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
<td>G</td>
</td>
</tr>
</table>
<td>Cell B</td>
<td>Cell C</td>
</table>
<tr>
<table border="1"width="400">
<td>Hi There</td>
</tr>
</table>
</body>
</html>
How is this?
<table border="1" width="350px" cellpadding="5px">
<tr>
<td>text</td>
</tr>
<tr>
<td><table>
<tr>
<td>
<font size="5">
<table border ="2" >
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</table>
</font>
</td>
<td><table cellspacing="20px"><tr><td></td></tr></table></td>
<td><table cellspacing="20px"><tr><td></td></tr></table></td>
<td><table cellspacing="20px"><tr><td>text</td></tr></table></td>
<td><table cellspacing="20px"><tr><td>text</td></tr></table></td>
</tr>
</table></td>
</tr>
<tr>
<td>
text
</td>
</tr>
</table>
The effect can be achieved by nesting a table:
tr{
border:1px solid;
}
table{
border-collapse:collapse;
}
#nested td{
border:1px solid;
}
<table>
<tr><td colspan="3">text</td></tr>
<tr>
<td>
<table id="nested">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
</td>
<td>text</td>
<td>text</td>
</tr>
<tr><td colspan="3">text</td></tr>
</table>
With inline styles only (as per OP request):
<table style="border-collapse: collapse;">
<tbody><tr style="border: 1px solid;"><td colspan="3">text</td></tr>
<tr style="border: 1px solid;">
<td>
<table id="nested" style="border-collapse: collapse;">
<tbody><tr style="border: 1px solid;">
<td style="border: 1px solid;">a</td>
<td style="border: 1px solid;">b</td>
<td style="border: 1px solid;">c</td>
</tr>
<tr style="border: 1px solid;">
<td style="border: 1px solid;">d</td>
<td style="border: 1px solid;">e</td>
<td style="border: 1px solid;">f</td>
</tr>
</tbody></table>
</td>
<td>text</td>
<td>text</td>
</tr>
<tr style="border: 1px solid;"><td colspan="3">text</td></tr>
</tbody></table>
Hey guys I was creating this table table recently in HTML.
image:http://imgur.com/wPXCwrd
The table (shown in image) created perfectly but a weird blank row was created (marked red in image). When I tried to delete that code the entire cells below the QUESTIONS row gets shifted (image link:http://imgur.com/jBfmNGV).
How do I remove that blank cell after MEN cell?
CODE:
<!DOCTYPE html>
<html>
<body>
<table align="left" border="1" cellpadding="3" cellspacing="3">
<tbody>
<tr>
<td colspan="5">QUESTIONAIRE RESULTS</td>
</tr>
<tr>
<td rowspan="3">QUESTIONS</td>
<td colspan="2" rowspan="2">WOMEN</td>
<td colspan="2" rowspan="2">MEN</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>YES</td>
<td>NO</td>
<td>YES</td>
<td>NO</td>
</tr>
<tr>
<td>Question 1</td>
<td>42%</td>
<td>58%</td>
<td>61%</td>
<td>39%</td>
</tr>
<tr>
<td>Question 2</td>
<td>53%</td>
<td>47%</td>
<td>69%</td>
<td>31%</td>
</tr>
<tr>
<td>Question 3</td>
<td>26%</td>
<td>74%</td>
<td>51%</td>
<td>49%</td>
</tr>
<tr>
<td>Question 4</td>
<td>40%</td>
<td>60%</td>
<td>60%</td>
<td>40%</td>
</tr>
</tbody>
</table>
</body>
</html>
Just remove the :
<td> </td>
so your final code will be :
<!DOCTYPE html>
<html>
<body>
<table align="left" border="1" cellpadding="3" cellspacing="3">
<tbody>
<tr>
<td colspan="5">QUESTIONAIRE RESULTS</td>
</tr>
<tr>
<td rowspan="3">QUESTIONS</td>
<td colspan="2" rowspan="2">WOMEN</td>
<td colspan="2" rowspan="2">MEN</td>
</tr>
<tr>
</tr>
<tr>
<td>YES</td>
<td>NO</td>
<td>YES</td>
<td>NO</td>
</tr>
<tr>
<td>Question 1</td>
<td>42%</td>
<td>58%</td>
<td>61%</td>
<td>39%</td>
</tr>
<tr>
<td>Question 2</td>
<td>53%</td>
<td>47%</td>
<td>69%</td>
<td>31%</td>
</tr>
<tr>
<td>Question 3</td>
<td>26%</td>
<td>74%</td>
<td>51%</td>
<td>49%</td>
</tr>
<tr>
<td>Question 4</td>
<td>40%</td>
<td>60%</td>
<td>60%</td>
<td>40%</td>
</tr>
</tbody>
</table>
</body>
</html>
Preview: https://jsfiddle.net/3q6n9v7k/
A more correct answer would be the changing the rowspan and colspan.
Instead of
<tr>
<td rowspan="3">QUESTIONS</td> //
<td colspan="2" rowspan="2">WOMEN</td>
<td colspan="2" rowspan="2">MEN</td>
</tr>
Do this
<tr>
<td rowspan="2">QUESTIONS</td>
<td colspan="2" rowspan="1">WOMEN</td>
<td colspan="2" rowspan="1">MEN</td>
</tr>
Also remove :
<tr>
<td> </td>
</tr>
check out Fiddle
I have a table like below (on the left) - how to make it to be like the one on the right ?
<table>
<thead>
<tr>
<td colspan='3' rowspan='2'>Lorem</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</thead>
</table>
Like this:
<table>
<thead>
<tr>
<td colspan='3'>Lorem</td>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>
Here your code!!
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/all.css"/>
<title>STACKOVERFLOW</title>
</head>
<body>
<table>
<tr>
<td colspan="3">Lorem</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
</body>
</html>
CSS
table {border-collapse: collapse}
table td {
border: 1px solid #ccc;
}
<table>
<thead>
<tr>
<td colspan='3'>Lorem</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</thead>
</table>
I must create this table, but colspan and rowspan make my brain crazy. Please help.
Jsfiddle blank for experiments, - http://jsfiddle.net/3pbuT/2/
Fairly straight-forward..... Your'e confusion is the number of rows you had. There are only 2 rows in that table.
DEMO HERE
<table>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="4"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
Try this ... if you have dreamweaver tool you can do this very easily....
<table width="200" border="1">
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td colspan="4"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
The easiest way is Dreamweaver, but it doesn't take much to deal with colspan and rowspan, I just did this with very little thinking, and I used jsfiddle just to make sure it was correct.
Enjoy.
<table>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="4"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table>
<thead>
<tr>
<th rowspan="2">город 1</th>
<th rowspan="2">город 2</th>
<th colspan="4">город 3</th>
<th rowspan="2">город 4</th>
</tr>
<tr>
<th>город 5</th>
<th>город 6</th>
<th>город 7</th>
<th>город 8</th>
</tr>
</thead>
</table>
Something like this:
<table>
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td colspan="4"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
http://jsfiddle.net/3pbuT/9/
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">one</td>
<td rowspan="2">Two</td>
<td colspan="4">Im big!</td>
<td rowspan="2">Last</td>
</tr>
<tr>
<td rowspan="2">one</td>
<td rowspan="2">Two</td>
<td>Part 1</td>
<td>Part 2</td>
</tr>
</table>
</body>
</html>
Here you go..
<table border="1">
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="4"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
colspan combines columns, rowspan combines rows. So you look at how many rows are there at maximum and how many columns there at maximum.
In your case you have 7 columns at maximum and 2 rows at maximum:
<table border="1">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
<td>m</td>
<td>n</td>
</tr>
</table>
Then you combine columns / rows:
<table border="1" style="padding:5px;border-spacing:10px">
<tr>
<td rowspan="2">a (former a)</td>
<td rowspan="2">b (former b)</td>
<td colspan="4">c (former c)</td>
<td rowspan="2">d (former g)</td>
</tr>
<tr>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
</table>
<html>
<head>
<style type='text/css'>
table {
border-spacing:0;
}
td {
border:1px solid grey;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan='2'>1 col, 2 rows</td>
<td rowspan='2'>1 col, 2 rows</td>
<td colspan='4'>4 col, 1 row</td>
<td rowspan='2'>1 col, 2 rows</td>
</tr>
<tr>
<td>1 col, 1 row</td>
<td>1 col, 1 row</td>
<td>1 col, 1 row</td>
<td>1 col, 1 row</td>
</tr>
</table>
</body>
</html>
EDIT - I'd recommend against WYSIWYG editors, because you won't learn how to do it yourself. Learning will make a few headaches, sure, but then you KNOW. Give a man a fish...
I would like to make this table layout:
I have:
<table border="1">
<tr> <td colspan="3">aaa</td> <td colspan="3">aa</td> </tr>
<tr> <td>a</td> <td> aa </td> <td> aaa </td> <td>aa</td><td>aa</td><td>aa</td> </tr>
</table>
but how can I make rest?
LIVE: http://jsfiddle.net/jsTvA/1/
Here it is:
Code: http://jsfiddle.net/jsTvA/14/
You could create a new table in a cell.
The way to approach the problem if you want a single table is:
Work out the maximum number of rows and columns you require. In your case it looks like 8 columns, 6 rows.
Make a simple table grid of this size.
Start setting colspan and rowspan on tds and removing the tds next to them.
Repeat this until you have the format you like.
The best i can:
<table border="1">
<tr>
<td colspan="3">aaa</td>
<td colspan="3">aa</td>
</tr>
<tr>
<td>a</td>
<td> aa </td>
<td> aaa </td>
<td>lol</td>
<td>
<table border="1">
<tr>
<td colspan="3">
lol
</td>
</tr>
<tr>
<td>
ok
</td>
<td>
ok
</td>
<td>
ok
</td>
</tr>
<tr>
<td>
ok
</td>
<td>
ok
</td>
<td>
ok
</td>
</tr>
</table>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="2">
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="10">
</td>
</tr>
</table>
http://jsfiddle.net/jsTvA/15/
<table border="1">
<tr>
<td colspan="3">aaa</td>
<td colspan="5">aa</td>
</tr>
<tr>
<td rowspan="3">a</td>
<td rowspan="3">aa</td>
<td rowspan="3">aa</td>
<td rowspan="3">aa</td>
<td colspan="3">aa</td>
<td rowspan="3">aa</td>
</tr>
<tr>
<td>bb</td>
<td>bb</td>
<td>bb</td>
</tr>
<tr>
<td>bb</td>
<td>bb</td>
<td>bb</td>
</tr>
<tr>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
</tr>
<tr>
<td colspan="8">aa</td>
</tr>
</table>
To make that structure you'll need to utilise the attribute colspan and rowspan.
Example.
To Make the following structure:
-------
|A |
-------
|X|Y|Z|
-----
| |1|2|
-------
use the code:
<tr>
<td colspan="3">A</td>
</tr>
<tr>
<td rowspan="2">X</td>
<td>Y</td>
<td>Z</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
An alternative is as a previous post suggested, to add a nested table as follows:
<tr>
<td>A</td>
</tr>
<tr>
<table>
<tr>
<td>X</td>
<td>Y</td>
<td>|</td>
</tr>
</table>
</tr>
Personally I'd opt for the colspan route, but its really up to you.
Another route would be to ignore tables entirely and use CSS, but you are likely to find this much more painful unless you are already competenent at using CSS.
You can try merging cells in excel and then convert it into html.
http://tableizer.journalistopia.com