I've been struggling for over an hour to create a HTML table. I can't understand why it doesn't work or how I should combine the rowspans, colspans. If you could help me, I would be more than grateful to you:
I tried the following, all failed, some broke my previous templates as well:
td {
border: 2px solid;
height: 100px;
width: 100px;
}
<table>
<tr>
<td rowspan="5"></td>
<td rowspan="5"></td>
</tr>
<tr>
<td rowspan="3"></td>
<td rowspan="3"></td>
</tr>
<tr>
<td rowspan="3"></td>
<td rowspan="3"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Please, help me.
Try with the following:
table { border-collapse: collapse; }
td {
border: 2px solid black;
height: 100px;
width: 100px;
}
<table>
<tr>
<td rowspan="2">A</td>
<td rowspan="2">A</td>
<td>B</td>
<td>B</td>
<td>C</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>C</td>
</tr>
</table>
I'm not sure why you used rowspans of 5 and 3 but the way it works is
you specify a rowspan or colspan and that fills in the grid of cells
<table>
<tr>
<td rowspan="5">a</td>
<td rowspan="5">b</td>
<td rowspan="3">c</td>
<td rowspan="3">d</td>
<td rowspan="3">e</td>
</tr>
Means we have 5 columns and 5 rows (so far)
+-+-+-+-+-+
|X|X|X|X|X| row 1
+-+-+-+-+-+
|X|X|X|X|X| row 2
+-+-+-+-+-+
|X|X|X|X|X| row 3
+-+-+-+-+-+
|X|X| | | | row 4
+-+-+-+-+-+
|X|X| | | | row 5
+-+-+-+-+-+
rows 2 and 3 need no cells (no <td>s) because they are already specified by the first row.
row 4 needs 3 <td> for the 3 unused cells
<tr>
<td rowspan="2">g</td>
<td rowspan="2">h</td>
<td rowspan="2">i</td>
</tr>
The grid is now full
+-+-+-+-+-+
|X|X|X|X|X| row 1
+-+-+-+-+-+
|X|X|X|X|X| row 2
+-+-+-+-+-+
|X|X|X|X|X| row 3
+-+-+-+-+-+
|X|X|X|X|X| row 4
+-+-+-+-+-+
|X|X|X|X|X| row 5
+-+-+-+-+-+
so row 5 needs no cells (no <td>s)
table { border-collapse: collapse; }
td {
border: 2px solid;
height: 100px;
width: 100px;
text-align: center;
}
<table>
<tr>
<td rowspan="5">a</td>
<td rowspan="5">b</td>
<td rowspan="3">c</td>
<td rowspan="3">d</td>
<td rowspan="3">e</td>
</tr>
<tr></tr>
<tr></tr>
<tr>
<td rowspan="2">g</td>
<td rowspan="2">h</td>
<td rowspan="2">i</td>
</tr>
<tr></tr>
</table>
This should look very closely to what you want to achieve. Important parts are border-collapse, rowspan, width of td, width of border, using class. This is one of many ways to do it.
td {
border: 4px solid;
height: 100px;
width: 50px;
}
table {
border-collapse: collapse;
}
.larger-width{
width: 75px;
}
<table>
<tr>
<td rowspan='2' class="larger-width"></td>
<td rowspan='2' class="larger-width"></td>
<td></td>
<td></td>
<td></td>
<td class="larger-width"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
[![<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table example</title>
<style>
table {
border-collapse: collapse;
}
table td {
border: 5px solid black;
}
</style>
</head>
<body>
<table border="2" cellpadding="50px">
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Output will be
1]1
Try this solution, do modifications as you wish.
<table width="346" height="200" border="1">
<tbody>
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
Related
I want to create a table as given. I have written the code for the first two columns but the output is incorrect. Need help figuring out my mistakes.
Ignore the little imperfections of the image of the table given in the question. They are not part of the output I desire.
Question-
My attempt for first two columns-
<table border="1" width="50%" height="50%">
<tr>
<td rowspan="6"></td>
<td rowspan="3"></td>
<td rowspan="1"></td>
</tr>
<tr>
<td rowspan="0" colspan="0"></td>
<td rowspan="3"></td>
<td rowspan="1"></td>
</tr>
</table>
Output-
What am I missing here?
I believe that this is what you're after:
table, td {
border: 1px solid #999;
}
table {
width: 100%;
}
td {
height: 50px;
}
<table>
<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>
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>
So I want to remove the extra spaces highlighted in red ink shown here:
http://i.stack.imgur.com/d7Kwo.png
When I remove the top images the table width becomes correct: 800px
but what I wanted is this:http://i.stack.imgur.com/XPsz2.jpg
Here is my current code:
<html>
<head><title>Adventure</title>
<link rel="stylesheet" type="text/css" href="STYLE04.css">
</head>
<body>
<table style="width:800px; height:600px" >
<tr>
<td colspan=3><img src="N13BANNER.PNG"></td>
<td><img src="N13LOGO.PNG"></td>
</tr>
<tr>
<td style="width:176px"><img src="N13BUTTON1.PNG"></td>
<td width=176><img src="N13IMG5.jpg"></td>
<td colspan=2 rowspan=6><img src="DUNE204.jpg"></td>
</tr>
<tr>
<td width=176><img src="N13BUTTON2.PNG"></td>
<td width=176><img src="N13IMG1.jpg"></td>
</tr>
<tr>
<td width=176><img src="N13BUTTON3.PNG"></td>
<td width=176><img src="N13IMG4.jpg"></td>
</tr>
<tr>
<td width=176><img src="N13BUTTON4.PNG"></td>
<td width=176><img src="N13IMG9.jpg"></td>
</tr>
<tr>
<td width=176><img src="N13BUTTON5.PNG"></td>
<td width=176><img src="N13IMG6.jpg"></td>
</tr>
<tr>
<td colspan=2><h1>Webpage last edited by asdf</h1></td>
</tr>
</table>
</body>
</html>
Code sample, with an update of your table layout without the images.
Is this how you want? ... then your images is to big, and pushes the cells too wide.
table {
width: 800px;
}
td {
background-color: gray;
width: 20%;
height: 85px;
}
tr:last-child td {
height: 40px;
}
img {
vertical-align: top;
}
<table>
<tr>
<td colspan=4></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td colspan=3 rowspan=6></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>mail</td>
<td>mail</td>
</tr>
<tr>
<td colspan=2>Webpage last edited by asdf</td>
</tr>
</table>
This is a table that I would like to achieve:
But I keep getting something like this:
This is what I've tried:
<table>
<tr>
<td rowspan="2">a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="2">d</td>
<td>e</td>
</tr>
</table>
Here's a link to JSFiddle with this (with some extra code for illustration): http://jsfiddle.net/2292D/
You need only vertical-align:middle and text-align:center
Apply this css to div
div {
display:table-cell; // Change
vertical-align:middle; //Change
border: 1px solid blue;
}
td {
border: 1px solid red;
text-align:center; // Change
}
Fiddle Demo
Good old days using table, use rowspan and colspan to achieve that kind of tablular structure, if you are using this for layout than don't, use div instead with float and CSS Positioning.
Demo
<table border="1" width="100%">
<tr>
<td rowspan="2" width="30%">a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="2" width="70%">d</td>
<td>e</td>
</tr>
</table>
I guess you need 3 rows for that, try my code:
<table>
<tr>
<td rowspan="2"><div id="a">a</div></td>
<td colspan="2"><div id="b">b</div></td>
</tr>
<tr>
<td colspan="2"><div id="c">c</div></td>
</tr>
<tr>
<td colspan="2"><div id="d">d</div></td>
<td><div id="e">e</div></td>
</tr>
Here's my fiddle: http://jsfiddle.net/LLe5c/
apply your id on td
html:
<table>
<tr>
<td id="a" rowspan="2"><div>a</div></td>
<td id="b" colspan="2"><div >b</div></td>
</tr>
<tr>
<td id="c" colspan="2"><div >c</div></td>
</tr>
<tr>
<td id="d" colspan="2"><div >d</div></td>
<td id="e"><div >e</div></td>
</tr>
</table>
Here is the Solution
<table>
<tr>
<td rowspan="2">a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="2">d</td>
<td>e</td>
</tr>
</table>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
}
td {
border: 1px solid red;
}
</style>
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>