Table with 3 rows. the first row span 1.5 column each
I am 2 months into learning html and i came across a task where i have no idea of where to start from. I want to implement a html table with 3 rows, the first row however should have two equal parts of columns and the other two to have 3 equal parts. Please help.
Here is a rough code for it:
<table>
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>three</td>
<td>four</td>
<td> five</td>
</tr>
<tr>
<td>six</td>
<td>seven</td>
<td> eight</td>
</tr>
</table>
You can use colspan. The colspan attribute defines the number of columns a table cell should span.
table, th, td {
border: 1px solid black;
}
<table>
<tr>
<td colspan='3'>one </td>
<td colspan='3'> two </td>
</tr>
<tr>
<td colspan='2'>three</td>
<td colspan='2'>four</td>
<td colspan='2'> five</td>
</tr>
<tr>
<td colspan='2'>six</td>
<td colspan='2'>seven</td>
<td colspan='2'> eight</td>
</tr>
</table>
Related
I have the following table:
Comm Layer
Implemented By
Application
Application
Transport
OS
Internet
OS
Link
OS
Link
Hardware
<table>
<thead>
<tr>
<th>Comm Layer</th>
<th>Implemented By</th>
</tr>
</thead>
<tbody>
<tr>
<td>Application</td>
<td>Application</td>
</tr>
<tr>
<td>Transport</td>
<td>OS</td>
</tr>
<tr>
<td>Internet</td>
<td>OS</td>
</tr>
<tr>
<td>Link</td>
<td>OS</td>
</tr>
<tr>
<td>Link</td>
<td>Hardware</td>
</tr>
</tbody>
</table>
I would like to merge the two cells that say "Link" and the three cells that say "OS". I tried using the rowspan attribute in several ways but to no avail. I was able to merge either the two "Link" cells or the three "OS" cells, but not both.
In short: you cannot have a <tr> where all cells participate in a rowspan="" because that creates a zero-height row (as there's no row-specific content). I feel this is a design flaw in HTML.
One workaround is to have a zero-width column that always has non-rowspan="" cells (which are propped up with , but hidden (using visibility: hidden;, not display: none;):
(My posted code comments out the removed cells with <!--<td>OS</td>--> for illustrative purposes, obviously you can remove those in your final version)
table {
border: 1px solid #999;
border-collapse: collapse;
}
th, td {
border: 1px solid #999;
}
tr > *:nth-child(1) { visibility: hidden; }
<table>
<thead>
<tr>
<th> </th>
<th>Comm Layer</th>
<th>Jurisdiction</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td>Application</td>
<td>Application</td>
</tr>
<tr>
<td> </td>
<td>Transport</td>
<td rowspan="3">OS</td>
</tr>
<tr>
<td> </td>
<td>Internet</td>
<!--<td>OS</td>-->
</tr>
<tr>
<td> </td>
<td rowspan="2">Link</td>
<!--<td>OS</td>-->
</tr>
<tr>
<td> </td>
<!--<td>Link</td>-->
<td>Hardware</td>
</tr>
</tbody>
</table>
There's probably improvements using more modern CSS techniques to enforce a minimum row height though - I've been using the technique since before I stopped using Dreamweaver in 2004.
<!-- Try this one -->
<table align="center" cellspacing="0" cellspadding=="0">
<thead>
<tr>
<th>Comm Layer</th>
<th>Jurisdiction</th>
</tr>
</thead>
<tbody>
<tr>
<td>Application</td>
<td>Application</td>
</tr>
<tr>
<td>Transport</td>
<td rowspan="2">OS</td>
</tr>
<tr>
<td>Internet</td>
</tr>
<tr>
<td rowspan="2">Link</td>
<td>OS</td>
</tr>
<tr>
<td>Hardware</td>
</tr>
</tbody>
</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>
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>
Here's my current code:
<tbody>
<tr><th colspan="7">TEST TITLE</th></tr>
<tr><td colspan="1">10-19-2014 - Test</td></tr>
<tr><td colspan="1">10-20-2014 - Test</td></tr>
<tr><td colspan="1">10-21-2014 - Test</td></tr>
<tr><td colspan="1">10-22-2014 - Test</td></tr>
<tr><td colspan="1">10-23-2014 - Test</td></tr>
<tr><td colspan="1">10-24-2014 - Test</td></tr>
<tr><td colspan="1">10-25-2014 - Test</td></tr>
<tr><td colspan="1">10-26-2014 - Test</td></tr>
</tbody>
Here's how the table is showing up:
TITLE
INFORMATION
INFORMATION
INFORMATION
INFORMATION
INFORMATION
INFORMATION
INFORMATION
This is how I want it to show up:
TITLE
INFORMATION | INFORMATION | INFORMATION | INFORMATION | INFORMATION | INFORMATION | INFORMATION
Since I've specified the column span as being 7 for the title, I thought that each of the other tds would show up as left to right instead of showing each on a new line.
What am I doing wrong here?
One posible solution without change at all your html:
table tbody tr:not(:first-child) {
float: left;
}
table tbody tr:first-child {
text-align: left;
}
table tbody tr:not(:first-child):not(:last-child) td:after {
content: "|";
padding-left: 10px;
}
<table>
<tbody>
<tr>
<th colspan="7">TEST TITLE</th>
</tr>
<tr>
<td colspan="1">10-19-2014 - Test</td>
</tr>
<tr>
<td colspan="1">10-20-2014 - Test</td>
</tr>
<tr>
<td colspan="1">10-21-2014 - Test</td>
</tr>
<tr>
<td colspan="1">10-22-2014 - Test</td>
</tr>
<tr>
<td colspan="1">10-23-2014 - Test</td>
</tr>
<tr>
<td colspan="1">10-24-2014 - Test</td>
</tr>
<tr>
<td colspan="1">10-25-2014 - Test</td>
</tr>
<tr>
<td colspan="1">10-26-2014 - Test</td>
</tr>
</tbody>
</table>
I use a combination of pseudo-elements and pseudo-class to achieve this.
This is how I do it. You create many table dividers within a single row. For the title, I give it it's own row, but make the colspan the same length as the maximum number of rows in the table. Just because you specify 7 for the colspan in the title does not mean that the <td> is automatically generated for you.
<table>
<tr>
<td colspan="7">
Title
</td>
</tr>
<tr>
<td>
Information
</td>
<td>
Information
</td>
<td>
Information
</td>
<td>
Information
</td>
<td>
Information
</td>
<td>
Information
</td>
<td>
Information
</td>
</tr>
</table>
if you don't know the total amount of columns and it needs to be dynamic, you could use a repeater inside the table to generate multiple instances of <td>
<table>
<tr>
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<td>
Information
</td>
</ItemTemplate>
</asp:Repeater>
</tr>
</table>
<table>
<tr>
<th colspan="7">TITLE</th>
</tr>
<tr>
<td colspan="1">
INFORMATION
</td>
<td colspan="1">
INFORMATION
</td>
<td colspan="1">
INFORMATION
</td>
<td colspan="1">
INFORMATION
</td>
<td colspan="1">
INFORMATION
</td>
<td colspan="1">
INFORMATION
</td>
<td colspan="1">
INFORMATION
</td>
</tr>
</table>
To create multiple columns, you need to have rows (tr elements) with multiple cells (th or td elements). You now have just rows with one cell in each. Just specifying colspan="7" for the cell of the first row says that the table has 7 columns, but in fact it does not: all other rows have just one cell in one column, and your markup is even formally invalid (violates the HTML table model).
To fix this, just put the other cells on one row:
td + td { border-left: solid; }
<table>
<tbody>
<tr><td colspan="7">TEST TITLE</td></tr>
<tr>
<td>10-19-2014 - Test</td>
<td>10-19-2014 - Test</td>
<td>10-19-2014 - Test</td>
<td>10-19-2014 - Test</td>
<td>10-19-2014 - Test</td>
<td>10-19-2014 - Test</td>
<td>10-19-2014 - Test</td>
</tr>
</tbody>
</table>
Notes: The colspan="1" attribute is redundant; it just states the default. The cell that spans 7 columns is best defined as a td element, not th, since th elements specify headers for all columns or rows (columns in this case) in a table; some text that is just a heading for some part of a table should thus be just a data cell, td. The “how I want it to show up” part in the question suggests that there should be borders between the cells, but not elsewhere; I have added a simple CSS rule to show how this could be achieved (by setting left border on every cell except the first one in a row).
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>