How can I do the following table in html?
|Cell1|Cell2|Cell3|
-------------------
|Cell1| Cell2 & 3 |
-------------------
|Cell1|Cell2|Cell3|
-------------------
| Cell1 & 2 |Cell3|
| Cell1 & 2 |Cell3|
-------------------
The last is merge two row and two column.
Appreciate your help people without using CSS.
Table has 5 rows and 3 columns.
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td colspan="2">2 & 3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan="2">1 & 2</td>
<td>3</td>
</tr>
<tr>
<td colspan="2">1 & 2</td>
<td>3</td>
</tr>
</table>
table, th, td {
border: 1px solid black;
}
<table>
<tr>
<td>January</td>
<td>$100</td>
<td>$50</td>
</tr>
<tr>
<td>January</td>
<td colspan="2">$50</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td>$50</td>
</tr>
<tr>
<td rowspan="2" colspan="2">January</td>
<td>$50</td>
</tr>
<tr>
<td>$50</td>
</tr>
</table>
You can use colspan and rowspan for this thing.
Colspan allows a single table cell to span the width of more than one cell or column.
Rowspan allows a single table cell to span the height of more than one cell or row.
Read more: https://html.com/tables/rowspan-colspan/#ixzz4v5ntM7rn
table, th, td {
border: 1px solid black;
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td colspan="2">2 & 3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td rowspan="2" colspan="2">1 & 2</td>
<td >3</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
Use colspan on <td> tag.
<table>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
<tr>
<td>Col 1</td>
<td colspan="2">Col 2 + Col 3</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
<table>
https://codepen.io/Toilal/pen/BwxdMg
tr:nth-child(1), tr:nth-child(3), tr:nth-child(5){
font-weight: bold;
font-size: 15pt;
}
tr:nth-child(2){
font-weight: bold;
font-size: 14pt;
}
td:nth-child(1){
border-left: 2px solid black;
border-right: 2px solid black;
}
td:nth-child(2){
border-right: 2px solid black;
}
td:nth-child(3){
border-right: 2px solid black;
}
tr:nth-child(4) > td:nth-child(1), tr:nth-child(4) > td:nth-child(2){
border-left: none;
border-right: 1px solid black;
}
<table>
<tr>
<td>Cell1</td>
<td>Cell2</td>
<td>Cell3</td>
</tr>
<tr>
<td>Cell1</td>
<td colspan="2">Cell2 & 3</td>
</tr>
<tr>
<td>Cell1</td>
<td>Cell2</td>
<td>Cell3</td>
</tr>
<tr>
<td colspan="2">Cell1 & 2</td>
<td>Cell3</td>
</tr>
<tr>
<td colspan="2">Cell1 & 2</td>
<td>Cell3</td>
</tr>
</table>
Related
I'm helping with an interactive table in a dashboard. Clicking rows in the table alters the data displayed on the rest of the dashboard. The table rows can have a 'selected' class, where the selected row is given a 4px bold border. The rows also have a :hover selector that gives them a 2px border.
My issue is that when using Mozilla Firefox V 56.0.1 this causes the rows between the row being hovered over and the selected row to be given a 4px border on the left and right sides of the row. See below for details.
Unintended behavior
Intended behavior
Here is the code:
HTML and CSS in CodePen
https://codepen.io/anon/pen/MOzJNZ
table {
border-collapse: collapse;
}
tr.notselected:hover {
border: 2px solid black;
padding: 2px;
}
tr.selected {
border: 4px solid black; }
<table>
<tr>
<td></td>
<td colspan="2">Header 1</td>
<td colspan="2">Header 2</td>
</tr>
<tr>
<td></td>
<td>Subheader 1.1</td>
<td>Subheader 1.2</td>
<td>Subheader 2.1</td>
<td>Subheader 2.2</td>
</tr>
<tr class="selected">
<td>Row 1</td>
<td >10.1</td>
<td >10.6</td>
<td >9.1</td>
<td >9.4</td>
</tr>
<tr class="notselected">
<td>Row 2</td>
<td>12.9</td>
<td>11.3</td>
<td>10.1</td>
<td>10.5</td>
</tr>
<tr class="notselected">
<td>Row 3</td>
<td></td>
<td></td>
<td>8.7</td>
<td>8.8</td>
</tr>
<tr class="notselected">
<td>Row 3</td>
<td>7.9</td>
<td>7.9</td>
<td></td>
<td></td>
</tr><tr class="notselected">
<td>Row 4</td>
<td></td>
<td></td>
<td>9.2</td>
<td>8.4</td>
</tr>
<tr class="notselected">
<td>Row 5</td>
<td>12.2</td>
<td>11.9</td>
<td>7.3</td>
<td>9.0</td>
</tr>
</table>
Added following class in order to fix firefox issue:
tr.notselected {
border: 0px solid black;
}
table {
border-collapse: collapse;
}
tr.notselected:hover {
border: 2px solid black;
padding: 2px;
}
tr.selected {
border: 4px solid black;
}
tr.notselected:hover td {
padding-bottom: 6px; }
tr.notselected {
border: 0px solid black;
}
<table>
<tr>
<td></td>
<td colspan="2">Header 1</td>
<td colspan="2">Header 2</td>
</tr>
<tr>
<td></td>
<td>Subheader 1.1</td>
<td>Subheader 1.2</td>
<td>Subheader 2.1</td>
<td>Subheader 2.2</td>
</tr>
<tr class="selected">
<td>Row 1</td>
<td >10.1</td>
<td >10.6</td>
<td >9.1</td>
<td >9.4</td>
</tr>
<tr class="notselected">
<td>Row 2</td>
<td>12.9</td>
<td>11.3</td>
<td>10.1</td>
<td>10.5</td>
</tr>
<tr class="notselected">
<td>Row 3</td>
<td></td>
<td></td>
<td>8.7</td>
<td>8.8</td>
</tr>
<tr class="notselected">
<td>Row 3</td>
<td>7.9</td>
<td>7.9</td>
<td></td>
<td></td>
</tr><tr class="notselected">
<td>Row 4</td>
<td></td>
<td></td>
<td>9.2</td>
<td>8.4</td>
</tr>
<tr class="notselected">
<td>Row 5</td>
<td>12.2</td>
<td>11.9</td>
<td>7.3</td>
<td>9.0</td>
</tr>
</table>
I want to create a table using rowspan and colspan and it is almost done. only the issue is in last tr. I don't know why but it is not picking the rowspan in last tr.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
<table style="width:50%">
<tr>
<td height="75px">1</td>
<td colspan="4" height="75px">2</td>
</tr>
<tr>
<td rowspan="3" colspan="2">a</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td></td>
<td></td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
As you can see in result I want to merge the last blank td with a.
This is the result I want:
You should put the first set of cells with 3, 4, 5 after the td with the row+colspan.
And omit the empty cells from the last row.
Result:
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
}
<table style="width:50%">
<tr>
<td width="20%" height="75px">1</td>
<td colspan="4" height="75px">2</td>
</tr>
<tr>
<td rowspan="3" colspan="2">a</td>
<td width="20%">3</td>
<td width="20%">4</td>
<td width="20%">5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
Note that the second column never has content of its own, it is always part of a colspan set. That would normally make the second column collapse on most if not all browsers, and that is why the cell width is being set.
This is simply an error in counting. rowspan="3" means it spans three rows.
First row
<tr>
<td rowspan="3" colspan="2">a</td>
</tr>
Second row
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
Third row
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
Fourth row … so it doesn't span it.
<tr>
<td></td>
<td></td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
(You should omit the empty cells from the final row too).
try this:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
<table style="width:50%">
<tr>
<td height="75px">1</td>
<td colspan="4" height="75px">2</td>
</tr>
<tr>
<td rowspan="3" colspan="2">a</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<tr style="visibility:hidden">
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tr>
</table>
In order to keep the overlapping of the cells as you stated, you need to use an "invisible" row for reference. I'm not aware of any other way to achieve this, as colspan and rowspan need actual cells as a reference.
Here's an updated version of your example that works that way. Had to change the CSS a bit as well to prevent double borders around the hidden cells.
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
.reference,
.reference td {
padding: 0px 5px;
height: 0px;
line-height: 0px;
border: 0 none;
}
<table style="width:50%">
<tr>
<td height="75px">1</td>
<td colspan="4" height="75px">2</td>
</tr>
<tr>
<td rowspan="4" colspan="2">a</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr class="reference">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
I have the code below:
tbody > tr:hover{
background-color: lightgrey;
cursor: pointer;
}
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">January</td>
<td>Week 1</td>
<td >$150</td>
</tr>
<tr>
<td>Week 3</td>
<td>$100</td>
</tr>
<tr>
<td rowspan="2">February</td>
<td>Week 2</td>
<td >$50</td>
</tr>
<tr>
<td>Week 1</td>
<td>$80</td>
</tr>
</tbody>
</table>
How can I highlight the whole row when I hover to the row.
For example, when I hover to January, it should highlight the whole January row instead of highlight only the half one because of the rowspan attribute.
Move the styling to the td under the hovered tr. In addition, highlight the sibling row, when the 1st row is hovered. The only caveat is that if the 2nd tr is hovered, it won't highlight the 1st cell.
tr:hover > td {
background-color: lightgrey;
cursor: pointer;
}
tr:nth-child(2n + 1):hover + tr {
background-color: lightgrey;
}
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">January</td>
<td>Week 1</td>
<td>$150</td>
</tr>
<tr>
<td>Week 3</td>
<td>$100</td>
</tr>
<tr>
<td rowspan="2">February</td>
<td>Week 2</td>
<td>$50</td>
</tr>
<tr>
<td>Week 1</td>
<td>$80</td>
</tr>
</tbody>
</table>
tr:hover td:not([rowspan]) {background: red;}
tr:hover td[rowspan]:hover ~ td {background: none;}
tr:hover td[rowspan]:hover {background: yellow;}
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">January</td>
<td>Week 1</td>
<td >$150</td>
</tr>
<tr>
<td>Week 3</td>
<td>$100</td>
</tr>
<tr>
<td rowspan="2">February</td>
<td>Week 2</td>
<td >$50</td>
</tr>
<tr>
<td>Week 1</td>
<td>$80</td>
</tr>
</tbody>
</table>
I am able to change the border styling of the top bar in the table, but I can't it to change the background color no matter what I do. Can anyone tell me where I am going wrong? My code is below:
<table>
<thead>
<tr >
<th>strong>Colour</strong></th>
<th><strong>Red</strong></th>
<th><strong>Green</strong></th>
<th><strong>White</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Length (m)</td>
<td>1</td>
<td>0.5</td>
<td>0.5</td>
</tr>
<tr>
<td align="left">Weight (kg)</td>
<td>4</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td align="left">Burn Time (sec)</td>
<td>60</td>
<td>22</td>
<td>15</td>
</tr>
<tr>
<td align="left">Light Output (cd)</td>
<td>200 000</td>
<td>100 000</td>
<td>850 000</td>
</tr>
<tr>
<td align="left">Visibility at sea level (km)</td>
<td>20</td>
<td>15</td>
<td>26</td>
</tr>
</tbody>
CSS:
table th, table td {
border: 1px solid gray;
}
table thead td, table thead tr {
background-color: pink;
border: 4px solid pink;
}
Your html code has some syntax erros:
Corrected here and working well:
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<table>
<thead>
<tr >
<th><strong>Colour</strong></th>
<th><strong>Red</strong></th>
<th><strong>Green</strong></th>
<th><strong>White</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Length (m)</td>
<td>1</td>
<td>0.5</td>
<td>0.5</td>
</tr>
<tr>
<td align="left">Weight (kg)</td>
<td>4</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td align="left">Burn Time (sec)</td>
<td>60</td>
<td>22</td>
<td>15</td>
</tr>
<tr>
<td align="left">Light Output (cd)</td>
<td>200 000</td>
<td>100 000</td>
<td>850 000</td>
</tr>
<tr>
<td align="left">Visibility at sea level (km)</td>
<td>20</td>
<td>15</td>
<td>26</td>
</tr>
</tbody>
</table>
</html>
http://plnkr.co/edit/XnLr3Fw9MO7jwvJrfjgB?p=preview
It's working for me! Take care with the tags... <strong>
table th, table td {
border: 1px solid gray;
}
table thead td, table thead tr {
background-color: pink;
border: 4px solid pink;
}
<table>
<thead>
<tr >
<th><strong>Colour</strong></th>
<th><strong>Red</strong></th>
<th><strong>Green</strong></th>
<th><strong>White</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Length (m)</td>
<td>1</td>
<td>0.5</td>
<td>0.5</td>
</tr>
<tr>
<td align="left">Weight (kg)</td>
<td>4</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td align="left">Burn Time (sec)</td>
<td>60</td>
<td>22</td>
<td>15</td>
</tr>
<tr>
<td align="left">Light Output (cd)</td>
<td>200 000</td>
<td>100 000</td>
<td>850 000</td>
</tr>
<tr>
<td align="left">Visibility at sea level (km)</td>
<td>20</td>
<td>15</td>
<td>26</td>
</tr>
</table>
Your CSS should include one more rule, for the <th> tag:
table th, table td {
border: 1px solid gray;
}
table thead td, table thead tr, table thead th {
background-color: pink;
border: 4px solid pink;
}
Also, you have error in the HTML code - missing starting bracket in <strong> tag on line <th>strong>Colour</strong></th>.
Check out the working fiddle.
Try like this: Demo
Instead of giving border for tr you can give for td and th
table thead td, table thead tr th { /* added th after tr */
background-color: pink;
border: 4px solid pink;
}
And try to open and close tags properly to get expected output :)
No need to add so many styles. Apply this.
table th, table thead tr td {
border: 1px solid red;
}
table thead tr {
background-color: red;
border: 4px solid pink;
}
<table>
<thead>
<tr >
<th><strong>Colour</strong></th>
<th><strong>Red</strong></th>
<th><strong>Green</strong></th>
<th><strong>White</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Length (m)</td>
<td>1</td>
<td>0.5</td>
<td>0.5</td>
</tr>
<tr>
<td align="left">Weight (kg)</td>
<td>4</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td align="left">Burn Time (sec)</td>
<td>60</td>
<td>22</td>
<td>15</td>
</tr>
<tr>
<td align="left">Light Output (cd)</td>
<td>200 000</td>
<td>100 000</td>
<td>850 000</td>
</tr>
<tr>
<td align="left">Visibility at sea level (km)</td>
<td>20</td>
<td>15</td>
<td>26</td>
</tr>
</tbody>
I have table with td rowspan and has 3 rows so how can I make those rows with no border while keeping the main one with border?
here is the table..
I want to make it look like this, I have edited this with paint just erased the lines.
here is the jsfiddle demo
here is my html code
<table id="Table">
<thead>
<tr>
<th>Track</th><th>Car</th>
<th></th>
<th>Score</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">LIST 1</td>
<td>Name 1</td>
<td>LT</td>
<td>59,800</td>
<td>8 days ago</td>
</tr>
<tr>
<td>Name 2</td>
<td>TR</td>
<td>58,000</td>
<td>10 days ago</td>
</tr>
<tr>
<td>Name 3</td>
<td>SO</td>
<td>60,000</td>
<td>8 days ago</td>
</tr>
<tr>
<td>LIST 2</td>
<td>Name 4</td>
<td>NL</td>
<td>60,000</td>
<td>8 days ago</td>
</tr>
<tr>
<td>LIST 3</td>
<td>Name 5</td>
<td>NR</td>
<td>59,000</td>
<td>9 days ago</td>
</tr>
<tr>
<td>LIST 4</td>
<td>Name 6</td>
<td>FI</td>
<td>57,000</td>
<td>10 days ago</td>
</tr>
</tbody>
</table>
and css
#Table {
table-layout:fixed;
width: 400px;
text-align: left;
border-collapse:collapse;
}
#Table th {
background: #F9F9F9;
border-bottom: solid 1px black;
padding-top: 3px;
padding-bottom: 4px;
}
#Table td {
background: #F9F9F9;
border-bottom: 1px solid black;
padding-top: 3px;
padding-bottom: 4px;
}
#Table th:nth-child(1) { width:180px; }
#Table th:nth-child(2) { width:200px; }
#Table th:nth-child(3) { width:30px; }
#Table th:nth-child(4) { width:80px; }
#Table th:nth-child(5) { width:120px; }
A better solution would be to move the border-bottom style to the <tr> (instead of <td>) and to use a custom class to specify if your <tr> needs border or not.
See you updated jsfiddle.
CSS added/modified :
/* modified */
#Table td {
/*border-bottom: 1px solid #cccccc;*/
padding-top: 3px;
padding-bottom: 4px;
}
/*added*/
#Table tr{
border-bottom: 1px solid #CCC;
}
#Table tr.no-border-row {
border-bottom: none;
}
HTML:
<table id="Table">
<thead>
<tr>
<th>Track</th>
<th>Car</th>
<th></th>
<th>Score</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr class="no-border-row">
<td rowspan="3">LIST 1</td>
<td>Name 1</td>
<td>LT</td>
<td>59,800</td>
<td>8 days ago</td>
</tr>
<tr class="no-border-row">
<td>Name 2</td>
<td>TR</td>
<td>58,000</td>
<td>10 days ago</td>
</tr>
<tr>
<td>Name 3</td>
<td>SO</td>
<td>60,000</td>
<td>8 days ago</td>
</tr>
<tr>
<td>LIST 2</td>
<td>Name 4</td>
<td>NL</td>
<td>60,000</td>
<td>8 days ago</td>
</tr>
<tr>
<td>LIST 3</td>
<td>Name 5</td>
<td>NR</td>
<td>59,000</td>
<td>6 days ago</td>
</tr>
<tr>
<td>LIST 4</td>
<td>Name 6</td>
<td>FI</td>
<td>57,000</td>
<td>1 month ago</td>
</tr>
</tbody>
</table>
Add this to your CSS:
#Table tbody tr:nth-child(1) td:not(:first-child) { border-bottom: none; }
#Table tbody tr:nth-child(2) td { border-bottom: none; }
Example: http://jsfiddle.net/uerdg8gm/1/