I'm trying to make a fairly simple table with a rowspan, and it works as expected. However, the problem is with cells appearing after the all the spanned cells are resolved; they are not positioned where I think they should be.
Here's my code:
<html>
<body>
<table width="100%" border="1">
<tr>
<td rowspan="7">
7 row
</td>
<td>
1 row
</td>
</tr>
<tr>
<td>
1 row
</td>
</tr>
<tr>
<td rowspan="5">
5 row
</td>
</tr>
<tr>
<td>
<i>This shouldn't be here, but below and aligned to the left side of the table</i>
</td>
<td>
<i>This shouldn't be here, but below and aligned at the right side of the table</i>
</td>
</tr>
</table>
</body>
</html>
Here's how it renders in Chrome and Firefox (I don't have the reputation to post inline images at Stack Overflow):
http://embernet.com/misc/rowspan.gif
Those two wordy cells really should be in the columns 1 and 2 that were already established, not as new columns 3 and 4.
The problem seems to come from me spanning rows that are never individually realized. Keep in mind this is part of a larger, dynamically generated table that in some cases will show each of the 7 rows. I know someone will inevitably ask why I need to do this.
I don't see anything in the specs that suggests I cannot rowspan like this, so I'm hoping I'm just missing something obvious.
A JSFiddle is here: https://jsfiddle.net/mLard575/
I am not sure what you are expecting. I give two possibilities as per my understanding.
Choose as per your requirements
First Method:
table {
border-collapse: collapse;
}
td {
padding: 20px;
border: 1px solid black;
text-align: center;
}
<body>
<table>
<tbody>
<tr>
<td rowspan="7">7</td>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td rowspan="5"> 5 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
<td> 1 </td>
</tr>
</tbody>
</table>
</body>
Second Method:
table {
border-collapse: collapse;
}
td {
padding: 20px;
border: 1px solid black;
text-align: center;
}
<body>
<table>
<tbody>
<tr>
<td rowspan="7">7</td>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
<td> 1 </td>
</tr>
</tbody>
</table>
</body>
If these two methods are not suited for you. Just explain little bit more with diagram example to update the code.
How can I create a table with the following layout?
I'm having problem with the second and third td in the first row. I've been playing with colspan but couldn't get it to work.
Think of a table with 7 cells per row to get that cell distribution (1 + ( 2 * 3 ) cells) and use colspan attributes as follows :
table {
width: 100%;
}
td {
border: 1px solid #777;
padding: 10px;
}
td:first-child {
width: 30%;
}
<table>
<tr>
<td>a</td>
<td colspan="3">b</td>
<td colspan="3">c</td>
</tr>
<tr>
<td>a</td>
<td colspan="2">b</td>
<td colspan="2">c</td>
<td colspan="2">d</td>
</tr>
</table>
Try this
<table>
<tr>
<td>td</td>
<td>
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>td</td>
<td>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
The colspan will always align to the upper/lower row column. To tackle the problem find a common multiplier of merging cells (in your case 6. 6 can be grouped in 3x2 width span or 2x3 width span). Create a table with 1 (common leftmost column)+6 columns total 7 columns. Then merge for top row 3 columns and again 3 columns. For second row merge 2 columns 3 times.
Like this:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td colspan="3"> </td>
<td colspan="3"> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
</table>
You must consider 7 columns initially. Try following
table, th, td {
border: 1px solid black;
}
<table style="width:100%">
<tr>
<td>Jill</td>
<td colspan="3">Smith</td>
<td colspan="3">Smith</td>
</tr>
<tr>
<td>Jill</td>
<td colspan="2">Smith</td>
<td colspan="2">50</td>
<td colspan="2">Jill</td>
</tr>
</table>
I have a simple question :
we usually use
<table>
<tr>
<td> stuff1 </td>
<td> stuff2 </td>
<tr>
...
</table>
Therefore i can have on line with 3 columns and another with 4 columns. But I would like to do the contrary : on column with 3 rows and one column with 4 rows.
<table>
<td>
<tr> stuff1 </tr>
<tr> stuff2 </tr>
<td>
...
</table>
but swapping <tr> and <td> does not seem to works...
You can do that using rowspan property. Here is a clue :
table tr td {
border: 1px solid black;
}
<table>
<tr>
<td rowspan="2">left</td>
<td>T-right</td>
</tr>
<tr>
<td>B-Right</td>
</tr>
</table>
You can achieve this by using the rowspan attribute. It works exactly like colspan. http://www.w3schools.com/tags/att_td_rowspan.asp
<table>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></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
I don't know how to merge rows and columns inside HTML tables.
Can you please help me with making such a table in HTML?
If you're confused how table layouts work, they basically start at x=0, y=0 and work their way across. Let's explain with graphics, because they're so much fun!
When you start a table, you make a grid. Your first row and cell will be in the top left corner. Think of it like an array pointer, moving to the right with each incremented value of x, and moving down with each incremented value of y.
For your first row, you're only defining two cells. One spans 2 rows down and one spans 4 columns across. So when you reach the end of your first row, it looks something like this:
<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
</tr>
</table>
Now that the row has ended, the "array pointer" jumps down to the next row. Since x position 0 is already taken up by a previous cell, x jumps to position 1 to start filling in cells. * See note about difference between rowspans.
This row has four cells in it which are all 1x1 blocks, filling in the same width of the row above it.
<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
The next row is all 1x1 cells. But, for example, what if you added an extra cell? Well, it would just pop off the edge to the right.
<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
* But what if we instead (rather than adding the extra cell) made all these cells have a rowspan of 2? The thing you need to consider here is that even though you're not going to be adding any more cells in the next row, the row still must exist (even though it's an empty row). If you did try to add new cells in the row immediately after, you'd notice that it would start adding them to the end of the bottom row.
<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
</table>
Enjoy the wonderful world of creating tables!
I'd suggest:
table {
empty-cells: show;
border: 1px solid #000;
}
table td,
table th {
min-width: 2em;
min-height: 2em;
border: 1px solid #000;
}
<table>
<thead>
<tr>
<th rowspan="2"></th>
<th colspan="4"> </th>
</tr>
<tr>
<th>I</th>
<th>II</th>
<th>III</th>
<th>IIII</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
References:
td element.
th element.
tbody element.
thead element.
table element.
If anyone is looking for a rowspan on both the left AND on the right,
here is how you can do it:
table {
border-collapse: collapse;
}
td {
padding: 20px;
border: 1px solid black;
text-align: center;
}
<table>
<tbody>
<tr>
<td rowspan="2">LEFT</td>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
<td> 4 </td>
<td rowspan="2">RIGHT</td>
</tr>
<tr>
<td> 5 </td>
<td> 6 </td>
<td> 7 </td>
<td> 8 </td>
</tr>
<tr>
<td> - </td>
<td> - </td>
<td> - </td>
<td> - </td>
<td> - </td>
<td> - </td>
</tr>
</tbody>
</table>
Alternatively, if you want to add the LEFT and RIGHT to an existing rowset, you can achieve the same result by throwing them in with a collapsed colspan in between:
table {
border-collapse: collapse;
}
td {
padding: 20px;
border: 1px solid black;
text-align: center;
}
<table>
<tbody>
<tr>
<td rowspan="3">LEFT</td>
<td colspan="4" style="padding: 0; border-bottom: solid 1px transparent;"></td>
<td rowspan="3">RIGHT</td>
</tr>
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
<td> 4 </td>
</tr>
<tr>
<td> 5 </td>
<td> 6 </td>
<td> 7 </td>
<td> 8 </td>
</tr>
<tr>
<td> - </td>
<td> - </td>
<td> - </td>
<td> - </td>
<td> - </td>
<td> - </td>
</tr>
</tbody>
</table>
Use rowspan if you want to extend cells down and colspan to extend across.
You can use rowspan="n" on a td element to make it span n rows, and colspan="m" on a td element to make it span m columns.
Looks like your first td needs a rowspan="2" and the next td needs a colspan="4".
The property you are looking for that first td is rowspan:
http://www.angelfire.com/fl5/html-tutorial/tables/tr_code.htm
<table>
<tr><td rowspan="2"></td><td colspan='4'></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<style type="text/css">
table { border:2px black dotted; margin: auto; width: 100%; }
tr { border: 2px red dashed; }
td { border: 1px green solid; }
</style>
<table>
<tr>
<td rowspan="2">x</td>
<td colspan="4">y</td>
</tr>
<tr>
<td>I</td>
<td>II</td>
<td>III</td>
<td>IV</td>
</tr>
<tr>
<td>nothing</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
I have used ngIf for one of my similar logic. it is as follows:
<table>
<tr *ngFor="let object of objectData; let i= index;">
<td *ngIf="(i%(object.rowSpan))==0" [attr.rowspan]="object.rowSpan">{{object.value}}</td>
</tr>
</table>
here,
i'm getting rowspan value from my model object.
<body>
<table>
<tr><td colspan="2" rowspan="2">1</td><td colspan="4">2</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td colspan="2">1</td><td>3</td><td>3</td><td>3</td><td>3</td></tr>
</table>
</body>
Colspan and Rowspan
A table is divided into rows and each row is divided into cells. In some situations we need the Table Cells span across (or merged) more than one column or row. In these situations we can use Colspan or Rowspan attributes.
Colspan
The colspan attribute defines the number of columns a cell should span (or merge) horizontally. That is, you want to merge two or more Cells in a row into a single Cell.
<td colspan=2 >
How to colspan ?
<html>
<body >
<table border=1 >
<tr>
<td colspan=2 >
Merged
</td>
</tr>
<tr>
<td>
Third Cell
</td>
<td>
Forth Cell
</td>
</tr>
</table>
</body>
</html>
Rowspan
The rowspan attribute specifies the number of rows a cell should span vertically. That is , you want to merge two or more Cells in the same column as a single Cell vertically.
<td rowspan=2 >
How to Rowspan ?
<html>
<body >
<table border=1 >
<tr>
<td>
First Cell
</td>
<td rowspan=2 >
Merged
</td>
</tr>
<tr>
<td valign=middle>
Third Cell
</td>
</tr>
</table>
</body>
</html>
It is similar to your table
<table border=1 width=50%>
<tr>
<td rowspan="2">x</td>
<td colspan="4">y</td>
</tr>
<tr>
<td bgcolor=#FFFF00 >I</td>
<td>II</td>
<td bgcolor=#FFFF00>III</td>
<td>IV</td>
</tr>
<tr>
<td>empty</td>
<td bgcolor=#FFFF00>1</td>
<td>2</td>
<td bgcolor=#FFFF00>3</td>
<td>4</td>
</tr>