I have to make a table, but I don't know how to build it, I've try a lot, but I can't.
I want to make a table like this -->
But I can only do this -->
I want the f cell to merge the two cells down, in the left middle of the b cell and the g cell.
How can I solve ? THANKS !!!
Here is my code:
table, td {
border:2px solid black;
border-collapse: collapse;
}
td{
height: 10px;
width: 200px;
vertical-align: top;
line-height: 25px;
}
td.a{
text-align: center;
vertical-align: top;
}
td.b{
text-align: left;
vertical-align: bottom;
}
td.c{
text-align: left;
vertical-align: middle
}
<table align="center">
<tr>
<td>a</td>
<td class="a" rowspan="3">b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td class="c" rowspan="3">e</td>
</tr>
<tr>
<td class="b" rowspan="2">f</td>
</tr>
<tr>
<td class="a" rowspan="2">g</td>
</tr>
<tr>
<td>h</td>
<td>i</td>
</tr>
</table>
Better to use grid but if you really wan to use table, you will need to fix a height to your tr, otherwise you wont see any difference:
tr{
height: 25px;
}
And if you really want to that the height fit with your image, you can double height on the fourth row:
tr:nth-child(4){
height: 50px;
}
DEMO
table, td {
border:2px solid black;
border-collapse: collapse;
}
tr{
height: 25px;
}
tr:nth-child(4){
height: 50px;
}
td{
height: 10px;
width: 200px;
vertical-align: top;
line-height: 25px;
}
td.a{
text-align: center;
vertical-align: top;
}
td.b{
text-align: left;
vertical-align: bottom;
}
td.c{
text-align: left;
vertical-align: middle
}
<html>
<head>
<title>Table</title>
<style> </style>
</head>
<body>
<table align="center">
<tbody>
<tr>
<td>a</td>
<td class="a" rowspan="3">b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td class="c" rowspan="3">e</td>
</tr>
<tr>
<td class="b" rowspan="2">f</td>
</tr>
<tr>
<td class="a" rowspan="2">g</td>
</tr>
<tr>
<td>h</td>
<td>i</td>
</tr>
<tbody>
</table>
</body>
</html>
I recommend you to use CSS-Grid to specify the rows and columns and then use grid-row property on the the item you want to span to other row it will make your task easier. Make sure you have enough rows available in your table to span one row item to other line.
Related
What I Want
With pure HTML and CSS, to have a table where each cell either:
has a border
contains an element that is the same size as the full cell
such that there are no visible gaps between cells.
Visually, I have the left but need the right
What I've Tried
I've tried playing around with setting various combinations of box-sizing and padding to no avail.
You can see one of my attempts at this JSFiddle.
You have added padding:0 to just the coloured cells. As the first cell still have padding, it is increasing all the row height.
If you add:
.rows-index {
border: 1px solid black;
padding: 0;
box-sizing: border-box;
}
You will notice there's still a white 1px line which is not white, It is the space the border of the first cell is taking (as before, increasing the row hight). It does not matter if use border-box in this table. All cells will have same height but the coloured divs won't fill that gap.
I would suggest to use outline insteed of border as a solution:
table {
border-collapse: collapse;
border-spacing: 0;
}
.cols-index, .rows-index {
outline: 1px solid black;
padding: 0;
box-sizing: border-box;
}
.table-cell {
padding: 0;
box-sizing: border-box;
}
.table-cell div {
width: 100%;
height: 100%;
display: inline-block;
box-sizing: inherit;
}
.purple { background-color: purple; }
.red { background-color: red; }
.lightblue { background-color: lightblue; }
<table xmlns="http://www.w3.org/1999/html">
<thead>
<tr>
<th class="top-left-cell"></th>
<th class="cols-index">Bish</th>
<th class="cols-index">Bash</th>
<th class="cols-index">Bosh</th>
</tr>
</thead>
<tbody>
<tr>
<td class="rows-index">First</td>
<td class="table-cell"><div class="purple">A</div></td>
<td class="table-cell"><div class="purple">B</div></td>
<td class="table-cell"><div class="purple">C</div></td>
<tr>
<tr>
<td class="rows-index">Second</td>
<td class="table-cell"><div class="red">D</div></td>
<td class="table-cell"><div class="red">E</div></td>
<td class="table-cell"><div class="red">F</div></td>
<tr>
<tr>
<td class="rows-index">Third</td>
<td class="table-cell"><div class="lightblue">G</div></td>
<td class="table-cell"><div class="lightblue">H</div></td>
<td class="table-cell"><div class="lightblue">I</div></td>
<tr>
</tbody>
</table>
Edited: your height:100%; in the coloured divs is not doing anything as the parent does not have a fixed height. If you don't want to use outline you could set the height of this divs to 19px which is the height of the first cell... the cell that set the height of your rows. However this "solution" is ugly as hell and won't work if anytime any cell has 2 lines of text.
Edited... again: or third option, using border would be to set a line-height to your coloured divs. This is much cleaner than the previous edited paragraph and it will work as a kind of padding: https://jsfiddle.net/654gu2sf/
You can 'extend' the cells' coloring a little with padding and border to fill up the blank spaces (which can be seen to correspond to the borders in the first column).
An adjusment has to be made in the first row in the table body which is not given a top 'extension'.
table * {
padding: 0;
margin: 0;
box-sizing: border-box;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.cols-index,
.rows-index {
border: 1px solid black;
}
.table-cell {
padding: 0;
box-sizing: border-box;
}
.table-cell div {
width: 100%;
height: 100%;
display: inline-block;
box-sizing: inherit;
}
.table-cell div {
padding: 1px;
background-color: var(--col);
border-top: var(--col) 1px solid;
border-bottom: var(--col) 1px solid;
}
.purple {
--col: purple;
}
.red {
--col: red
}
.lightblue {
--col: lightblue;
}
tbody tr:first-child td>div {
border-top-width: 0px;
}
td {
text-align: center;
}
.rows-index {
text-align: right;
}
<table xmlns="http://www.w3.org/1999/html">
<thead>
<tr>
<th class="top-left-cell"></th>
<th class="cols-index">Bish</th>
<th class="cols-index">Bash</th>
<th class="cols-index">Bosh</th>
</tr>
</thead>
<tbody>
<tr>
<td class="rows-index">First</td>
<td class="table-cell">
<div class="purple">A</div>
</td>
<td class="table-cell">
<div class="purple">B</div>
</td>
<td class="table-cell">
<div class="purple">C</div>
</td>
</tr>
<tr>
<td class="rows-index">Second</td>
<td class="table-cell">
<div class="red">D</div>
</td>
<td class="table-cell">
<div class="red">E</div>
</td>
<td class="table-cell">
<div class="red">F</div>
</td>
</tr>
<tr>
<td class="rows-index">Third</td>
<td class="table-cell">
<div class="lightblue">G</div>
</td>
<td class="table-cell">
<div class="lightblue">H</div>
</td>
<td class="table-cell">
<div class="lightblue">I</div>
</td>
</tr>
</tbody>
</table>
You can add the cellspacing attribute to to table tag to adjust spacing between cells.
To remove the spacing, set cellspacing=0.
td, th {
border: 1px solid black;
}
<table cellspacing=0>
<tr>
<th></th>
<th>bish</th>
<th>bash</th>
<th>bosh</th>
</tr>
<tr>
<td>first</td>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td>second</td>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td>third</td>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
</table>
I have to make a table like
and I have this code so far:
table, td, tr {
border: 1px solid black;
}
td {
width: 50px;
height: 50px;
}
td[rowspan="2"] {
height: 100px;
}
td[colspan="2"] {
width: 100px;
}
<div>
<table>
<tr>
<td>a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td rowspan="2">c</td>
<td colspan="2" rowspan="2">
<table>
<tr>
<td colspan="2" rowspan="2">d</td>
</tr>
<tr></tr>
</table>
</td>
</tr>
<tr></tr>
</table>
</div>
The validator is giving me
and I don't know how to fix them.
I need no errors from the validator, as
it has to be acceptable by specification.
rowspans and colspans are only used if a cell should span 2 other cells horizontally or vertically, which isn't the case in your example. They are not there to define width or height.
So delete those and use classes instead to define the properties you want:
Apart from that, delete those empty tr elements you have in there - they make no sense without tds in them. ALso the nested table with only one cell in it is rather strange (you could just fill that cell with content), but maybe there's a reason for that which you didn't tell us.
table, td, tr {
border: 1px solid black;
}
td {
width: 50px;
height: 50px;
}
td.b {
height: 100px;
}
td.a {
width: 100px;
}
<div>
<table>
<tr>
<td>a</td>
<td class="a">b</td>
</tr>
<tr>
<td class="b">c</td>
<td class="a b" >
<table>
<tr>
<td class="a b">d</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
Setting a table row's background color to grey, you'd get a table row that would look like this
+-------------------+--------------------+------------------------+---------------+
|Col1 | Col2 | Col3 | Numeric Column|
+------------ ------+--------------------+------------------------+---------------+
I want to be able to pad the left and right most texts however to get an effect like this
+----------------+------------------+----------------------+---------------+
| Col1 | Col2 | Col3 | Numeric Column|
+----------------+------------------+----------------------+---------------+
Is it possible? I want this effect for both rows and headers
Table HTML and CSS Below:
table {
border-collapse: separate;
border-spacing: 0 1rem;
font-size: 85%;
}
th {
letter-spacing: 1px;
padding-left: 1rem;
border: 0;
}
td {
background-color: grey;
border-radius: 5px;
border: 0;
}
<table class="content-table">
<thead>
<tr>
<th><strong>Name</strong></th>
<th><strong>Age</strong></th>
<th><strong>Height</strong></th>
<th><strong>Location</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>Stephen Curry</td>
<td>27</td>
<td>1,91</td>
<td>Akron, OH</td>
</tr>
<tr>
<td>Klay Thompson</td>
<td>25</td>
<td>2,01</td>
<td>Los Angeles, CA</td>
</tr>
</tbody>
</table>
Edit:
Found an image by ueno on Dribbble that shows the effect I'm trying to achieve. In the image below, you can see that the table rows' background color slightly pass the text whereas on my table (2nd image), it does not. I understand that I can set text-align: center as some people are saying in the comments however I prefer the left align with just a bit of padding.
I'm not sure if this is what you mean but here is how you can center the text in the row.
An example plunker :
table {
border-collapse: separate;
border-spacing: 0 1rem;
font-size: 85%;
}
th {
letter-spacing: 1px;
padding-left: 1rem;
border: 0;
}
tr {
letter-spacing: 1px;
padding-left: 1rem;
border: 0;
}
td {
border-radius: 5px;
border: 0;
}
.text-center{
text-align: center;
}
tbody tr:nth-child(odd) {
background-color: grey;
}
<table class="content-table">
<thead>
<tr>
<th><strong>Name</strong></th>
<th class="text-center"><strong>Age</strong></th>
<th class="text-center"><strong>Height</strong></th>
<th><strong>Location</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>Stephen Curry</td>
<td class="text-center">27</td>
<td class="text-center">1,91</td>
<td>Akron, OH</td>
</tr>
<tr>
<td>Klay Thompson</td>
<td class="text-center">25</td>
<td class="text-center">2,01</td>
<td>Los Angeles, CA</td>
</tr>
<tr>
<td>Klay Thompson</td>
<td class="text-center">25</td>
<td class="text-center">2,01</td>
<td>Los Angeles, CA</td>
</tr>
</tbody>
</table>
As you can see i have made an class called .text-center and attached it to the columns I have understood you want to be centered. You can create same classes for -right and -left alignment. And changed some tags as
th to tr in tbody. I hope this is what you mean.
Not quite sure if this is what you were trying to get but this achieves the effect you have shown in the ueno picture above.
table {
border-collapse: collapse;
width:100%;
padding-left:20px;
padding-right:20px;
}
td, th {
padding: 12px;
}
tr:nth-child(even){background-color: #f2f2f2;}
th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: white;
color: black;
<table class="content-table">
<thead>
<tr>
<th><strong>Name</strong></th>
<th><strong>Age</strong></th>
<th><strong>Height</strong></th>
<th><strong>Location</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>Stephen Curry</td>
<td>27</td>
<td>1,91</td>
<td>Akron, OH</td>
</tr>
<tr>
<td>Klay Thompson</td>
<td>25</td>
<td>2,01</td>
<td>Los Angeles, CA</td>
</tr>
<tr>
<td>Stephen Curry</td>
<td>27</td>
<td>1,91</td>
<td>Akron, OH</td>
</tr>
<tr>
<td>Klay Thompson</td>
<td>25</td>
<td>2,01</td>
<td>Los Angeles, CA</td>
</tr>
</tbody>
</table>
I'm trying to use HTML to construct a table with three rows (1-3) and three columns (A-C) forming nine "virtual cells" (A1, B1, C1, A2, B2, C2, A3, B3, C3) and apply row spanning so that:
cell A1 span all three rows (covering A2 and A3)
cell C1 span two rows (covering C2)
cell B2 span two rows (covering B3)
This is what I want to see:
This is the HTML I thought would give me that:
<html>
<head>
<style>
table { border-collapse: collapse; }
td { border: 1px solid black; padding: 1em; vertical-align: top; }
</style>
</head>
<body>
<table>
<tr><td rowspan="3">A1</td><td>B1</td><td rowspan="2">C1</td></tr>
<tr><td rowspan="2">B2</td></tr>
<tr><td>C3</td></tr>
</table>
</body>
</html>
But that gives me:
What is the correct way to get what I want? Or is it not possible?
This is for use in technical documentation. It is not a layout issue, the content is semantically a table.
In order to prevent the rows collapsing without the need for additional markup, you can attach a phantom cell to each row with tr::after set to display: table-cell with your cell padding on top and bottom and a unicode blank space:
tr::after {
content: '\00a0';
display: table-cell;
padding: 1em 0;
}
Gives you the correct result:
It's worth noting that the phantom cell will create a slight gap to the right like this:
Full snippet
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 1em;
vertical-align: top;
}
tr:after {
content: '\00a0';
display: table-cell;
padding: 1em 0;
}
<table>
<tr>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td rowspan="2">B2</td>
</tr>
<tr>
<td>C3</td>
</tr>
</table>
Here's a solution without having to know the table height up front, using hidden table cells, like in Align table using rowspan and colspan (as I said, it's basically a duplicate, just another layout):
<html>
<head>
<style>
table { border-collapse: collapse; }
td { border: 1px solid black; padding: 1em; vertical-align: top; }
td.hidden { visibility: hidden; padding: 1em 0; border: 0 none; }
</style>
</head>
<body>
<table>
<tr><td rowspan="3">A1</td><td>B1</td><td rowspan="2">C1</td><td class="hidden"></td></tr>
<tr><td rowspan="2">B2</td><td class="hidden"></td></tr>
<tr><td>C3</td><td class="hidden"></td></tr>
</table>
</body>
</html>
Why not just setting a height to the tr cause it is a table the height will adjust anyways if there is more content inside the row.
something like so:
table {
border-collapse: collapse;
}
tr {
height: 30px;
}
td {
border: 1px solid black;
padding: 1em;
vertical-align: top;
}
<table>
<tr>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td rowspan="2">B2</td>
</tr>
<tr>
<td>C3</td>
</tr>
</table>
Otherwise,
<!DOCTYPE html>
<html>
<head>
<style>
table { border-collapse: collapse; }
td{border: 1px solid black; padding: 1em; vertical-align: top; }
</style>
</head>
<body>
<table>
<tr>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td rowspan="2">B2</td>
</tr>
<tr>
<td rowspan="2">C3</td>
</tr>
</table>
</body>
</html>
You could hack it like this:
<html>
<head>
<style>
table { border-collapse: collapse; }
td { border: 1px solid black; padding: 1em; vertical-align: top; }
</style>
</head>
<body>
<table>
<tr>
<td style="width:0px;padding:0;border:0"></td>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td style="width:0px;padding:0;border:0;height:50px"></td>
<td rowspan="2">B2</td>
</tr>
<tr>
<td style="width:0px;padding:0;border:0"></td>
<td>C3</td>
</tr>
</table>
</body>
</html>
... but I would recommend to use another structure instead of tables, since it doesn't have a lot in common with table, besides the columns.
It's depend the height of your table.
http://codepen.io/anon/pen/jBOgpx
<table>
<tr>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td rowspan="2" style="height:65px">B2</td>
</tr>
<tr>
<td>C3</td>
</tr>
</table>
The second column spans 2 rows. I want the first column NOT to be divided by 50% for each row. Row2 should start right under the content of Row1.
<table border="1" style="width:850px">
<tr>
<td style="width: 50%; vertical-align: top;">1.Row Cell 1</td>
<td rowspan="2" style="height:800px">1-2 Row Cell 2</td>
</tr>
<tr style="vertical-align:top">
<td style="vertical-align:top">2.Row Cell 1</td>
</tr>
</table>
OK, seems that this is related to Internet Explorer 11, but there must be a way to accomplish this!?
So there is your solution in the snippet below :
table , td, th {
border: 1px solid #595959;
border-collapse: collapse;
}
td, th {
padding: 3px;
width: 250px;
height: 150px;
}
th {
background: #f0e6cc;
}
.even {
background: #fbf8f0;
}
.odd {
background: #fefcf9;
}
<table>
<tbody>
<tr>
<td style="height:1em">This is a test thank you for your attention</td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
Hope it help.
Adding a height: 1em; seemed to work - like this for the first cell:
<td style="width: 50%; vertical-align: top; height: 1em;">