I would like to create a simple html table with sub-rows within a single row. It looks something like this;
The tricky part is to divide the 3rd column into 2 rows row 1 and Row 2. How would the html code look like to implement such a table?
Using rowspan
<table border=1>
<tr><td rowspan=2>1</td><td rowspan=2>Main</td><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
</table>
Try this:
<html>
<head>
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th rowspan="3">col1</th>
<th rowspan="3">col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
</table>
</body>
</html>
You can use two div's to simulate the two rows in the last column:
table {
border-collapse: collapse;
width: 50%;
height: 50%;
}
th, td {
border: 1px solid black;
}
td .test {
border-bottom: 1px solid black;
}
<table>
<tr id="row1">
<td>a
</td>
<td>b
</td>
<td>
<div class="test">Test</div>
<div>Test</div>
</td>
</tr>
</table>
Even nested tables might help:
<table>
<tr>
<td>Hi</td>
<td>
<table>
<tr>
<td>
How
</td>
</tr>
<tr>
<td>
When
</td>
</tr>
</table>
</td>
</tr>
</table>
Nested Tables Fiddle
Related
I want to make table like this. A has 5row and B has 2.5row. I show another question about rowspan vlaue have to be integer. So I tried to revise totalrow is 6 and A is 6row , B is 3row, C is 1row and one is 2row. But I can't do like this image. If you can solve it, please talk to me.
Here's a basic example for you. You add the rowspan to the TD Tag and then on the subsequent rows, you have 1 less TD tag
table, tr, td { border:1px solid black; border-collapse: collapse }
<table>
<tr>
<td rowspan="2">Row Span 2</td>
<td>Normal Column</td>
</tr>
<tr>
<td>Normal Column</td>
</tr>
</table>
EDIT - Taking into account the fact that column B is 2.5 rows tall, and after review of the other answer, here is complete method, which uses both an extra table and rowspan
table, tr, td { border:1px solid black; border-collapse: collapse }
<html>
<body>
<table border=1 width=100% height=100%>
<tr>
<td rowspan="5">A</td>
<td rowspan="5" height=100%>
<table border=1 width=100% height="100%">
<tr>
<td>B1</td>
</tr>
<tr>
<td>B2</td>
</tr>
</table>
</td>
<td>C1</td>
</tr>
<tr>
<td>C2</td>
</tr>
<tr>
<td>C3</td>
</tr>
<tr>
<td>C4</td>
</tr>
<tr>
<td>C5</td>
</tr>
</table>
</body>
</html>
I have a basic table and would like to show the first 3 rows under the header, then provide a scroll wheel to display the remaining 2 rows.
I have tried setting the height of the table and using overflow: scroll in various places but cannot get to work. I wasn't sure if this property could even be used on tables or if it was just for divs.
My code is below, many thanks in advance for any help.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 15px 100px;
}
</style>
<table>
<thead>
<tr>
<th>Name</th>
<th>DOB</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>26.01.1989</td>
<td>john#email.com</td>
</tr>
<tr>
<td>Rick Thompson</td>
<td>15.04.1995</td>
<td>rick#email.com</td>
</tr>
<tr>
<td>Tim Bloggs</td>
<td>03.02.2000</td>
<td>tim#email.com</td>
</tr>
<tr>
<td>Bob Roberton</td>
<td>11.04.1985</td>
<td>bob#email.com</td>
</tr>
<tr>
<td>Joe Bishop</td>
<td>03.02.2010</td>
<td>joe#email.com</td>
</tr>
</tbody>
</table>
</body>
You have to put the table inside a div and then set the height of the div to be smaller than the height of your table and overflow-y: scroll.
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 15px 100px;
}
.table-wrap {
height: 222px;
overflow-y: scroll;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Name</th>
<th>DOB</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>26.01.1989</td>
<td>john#email.com</td>
</tr>
<tr>
<td>Rick Thompson</td>
<td>15.04.1995</td>
<td>rick#email.com</td>
</tr>
<tr>
<td>Tim Bloggs</td>
<td>03.02.2000</td>
<td>tim#email.com</td>
</tr>
<tr>
<td>Bob Roberton</td>
<td>11.04.1985</td>
<td>bob#email.com</td>
</tr>
<tr>
<td>Joe Bishop</td>
<td>03.02.2010</td>
<td>joe#email.com</td>
</tr>
</tbody>
</table>
</div>
</body>
table {
border-collapse: collapse;
max-height: 50px;
overflow: auto;
}
th, td {
border: 1px solid black;
padding: 15px 100px;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>DOB</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>26.01.1989</td>
<td>john#email.com</td>
</tr>
<tr>
<td>Rick Thompson</td>
<td>15.04.1995</td>
<td>rick#email.com</td>
</tr>
<tr>
<td>Tim Bloggs</td>
<td>03.02.2000</td>
<td>tim#email.com</td>
</tr>
<tr>
<td>Bob Roberton</td>
<td>11.04.1985</td>
<td>bob#email.com</td>
</tr>
<tr>
<td>Joe Bishop</td>
<td>03.02.2010</td>
<td>joe#email.com</td>
</tr>
</tbody>
</table>
How do I put a border around a column in a table in HTML?
Do we use colspan for such functions?
Here's an example of a column border without styling the same column of each row.
See <colgroup> for more reference.
table {
border-collapse: collapse;
}
.outlined {
border: 1px solid blue;
}
<table>
<colgroup>
<col>
<col class="outlined">
<col span="3">
</colgroup>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
<td>Fifth</td>
</tr>
<tr>
<td>First</td>
<td>Yellow</td>
<td>Third</td>
<td>Fourth</td>
<td>Fifth</td>
</tr>
<tr>
<td>First</td>
<td>Yellow</td>
<td>Third</td>
<td>Fourth</td>
<td>Fifth</td>
</tr>
</table>
HTML code
<table>
<tr>
<th>Expenses</th>
<th>Cost</th>
</tr>
<tr>
<td>iPhone 8</td>
<td>$1200</td>
</tr>
<tr>
<td>MacBook Pro</td>
<td>$2800</td>
</tr>
<tr>
<td colspan="2">Sum: $4000</td>
</tr>
</table>
CSS code
th, td {
border: 2px solid black;
}
You can also play around with table{border}
Use;
td { border: 1px solid #000000; }
colspan is to merge cells. For example; below line merges 2 cells
<tr><td colspan="2">Merged Column</td></tr>
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_colspan
<html>
<head>
<title></title>
<style>
table, th, td {
border: 1px solid #000;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Raju</td>
<td>Kumar</td>
<td>22</td>
</tr>
<tr>
<td>Mohit</td>
<td>Sharma</td>
<td>20</td>
</tr>
</table>
</body>
</html>
I am trying to create a table similar to the one shown in the attached screenshot. Data for this table is coming through the python script, but I need some inputs on HTML side on how to create a table that can span through multiple rows
With my little knowledge on HTML, I tried creating the table with the following code, but it doesn't appear like its working as expected. It would be highly helpful if anyone can throw some light on what could be wrong here
table,
td,
th {
font-family: Verdana;
border: 2px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
background-color: green;
color: white;
}
th,
tr {
height: 50px;
}
td {
font-family: Verdana;
font-size: 15pt;
text-align: center;
}
body {
background-color: lightgreen
}
<table style="width:100%">
<table>
<tr>
<th>Project</th>
<th>Environment</th>
<th>Data1</th>
<th>Multiple Data</th>
</tr>
<tr>
<td rowspan="4">project1</td>
<td rowspan="4">prod</td>
<td rowspan="4">project1data</td>
<td rowspan="4">project1 multi row data1</td>
<td rowspan="4">project1 multi row data2</td>
</tr>
<tr>
<td rowspan="4">project2</td>
<td rowspan="4">stage</td>
<td rowspan="4">project2data</td>
<td rowspan="4">project2 multi row data1</td>
<td rowspan="4">project2 multi row data2</td>
</tr>
<tr>
<td rowspan="4">project3</td>
<td rowspan="4">test</td>
<td rowspan="4">project3data</td>
<td rowspan="4">project3 multi row data1</td>
<td rowspan="4">project3 multi row data2</td>
</tr>
<tr>
<td rowspan="4">project4</td>
<td rowspan="4">dev</td>
<td rowspan="4">project4data</td>
<td rowspan="4">project4 multi row data1</td>
<td rowspan="4">project4 multi row data2</td>
</tr>
<tr>
<td rowspan="4">project5</td>
<td rowspan="4">qa</td>
<td rowspan="4">project5data</td>
<td rowspan="4">project5 multi row data1</td>
<td rowspan="4">project5 multi row data2</td>
</tr>
</table>
The mistake is that you have rowspan="4" even in the last td. You will need to avoid a rowspan there:
<table>
<tr>
<th>Project</th>
<th>Environment</th>
<th>Data1</th>
<th>Multiple Data</th>
</tr>
<tr>
<td rowspan="3">project1</td>
<td rowspan="3">prod</td>
<td rowspan="3">project1data</td>
<td>project1 multi row data1</td>
</tr>
<tr>
<td>project1 multi row data2</td>
</tr>
<tr>
<td>project1 multi row data3</td>
</tr>
<tr>
<td rowspan="3">project2</td>
<td rowspan="3">stage</td>
<td rowspan="3">project2data</td>
<td>project2 multi row data1</td>
</tr>
<tr>
<td>project2 multi row data2</td>
</tr>
<tr>
<td>project2 multi row data3</td>
</tr>
<tr>
<td rowspan="3">project3</td>
<td rowspan="3">test</td>
<td rowspan="3">project3data</td>
<td>project3 multi row data1</td>
</tr>
<tr>
<td>project3 multi row data2</td>
</tr>
<tr>
<td>project3 multi row data3</td>
</tr>
<tr>
<td rowspan="3">project4</td>
<td rowspan="3">dev</td>
<td rowspan="3">project4data</td>
<td>project4 multi row data1</td>
</tr>
<tr>
<td>project4 multi row data2</td>
</tr>
<tr>
<td>project4 multi row data3</td>
</tr>
<tr>
<td rowspan="3">project5</td>
<td rowspan="3">qa</td>
<td rowspan="3">project5data</td>
<td>project5 multi row data1</td>
</tr>
<tr>
<td>project5 multi row data2</td>
</tr>
<tr>
<td>project5 multi row data3</td>
</tr>
</table>
Please check this :
Basically you can use simple <div> inside the td to accomplish this for 3rd table column.
https://jsfiddle.net/ryb0w54a/
table { border:1px solid #000;border-collapse:collapse;}
th {border:1px solid #000;}
td { border:1px solid #000;}
div { border-bottom : 1px solid #000}
div.last { border-bottom : 0;}
<table>
<th>Project</th>
<th>Environment</th>
<th>Data1</th>
<th>Multiple Data</th>
<tr>
<td>Project 1</td>
<td>Env 1</td>
<td>Project 1 Data</td>
<td>
<div>project1 multi row data1</div>
<div>project1 multi row data2</div>
<div class="last">project1 multi row data3</div>
</td>
</tr>
<tr>
<td>Project 1</td>
<td>Env 1</td>
<td>Project 1 Data</td>
<td>
<div>project1 multi row data1</div>
<div>project1 multi row data2</div>
<div class="last">project1 multi row data3</div>
</td>
</tr>
</table>
remove rowspan=4 for your multiple data column and add them to another <tr> with rowspan=1 after relative no. of empty divs.
I think this will help you what you require
table,
td,
th {
font-family: Verdana;
border: 2px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
background-color: green;
color: white;
}
th,
tr {
height: 50px;
}
td {
font-family: Verdana;
font-size: 15pt;
text-align: center;
}
body {
background-color: lightgreen
}
<table>
<thead>
<tr>
<th>Project</th>
<th>Environment</th>
<th>Data</th>
<th>Multiple Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>
<table>
<tbody>
<tr>
<td>B1</td>
</tr>
<tr>
<td>B2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Your approach was correct but the way you implemented it has a small mistake. I think this code will give you the proper way to address your problem. The code is pretty basic but will help you to understand how it works.
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4">Data 1</td>
<td rowspan="4">Data 2</td>
</tr>
<tr>
<td>Data 2.1</td>
</tr>
<tr>
<td>Data 2.1</td>
</tr>
<tr>
<td>Data 2.1</td>
</tr>
</tbody>
</table>
You can do this simply without using rowspan and just adding another table in the last td where the multiple rows will come.
Here we go :
table,
td,
th {
font-family: Verdana;
border: 2px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
background-color: green;
color: white;
}
th,
tr {
height: 50px;
}
td {
font-family: Verdana;
font-size: 15pt;
text-align: center;
}
body {
background-color: lightgreen
}
table tr td table {
border: none;
}
table tr td table td {
border-left: none;
border-right: none;
}
table tr td table tr:first-child td {
border-top: none;
}
table tr td table tr:last-child td {
border-bottom: none;
}
<table>
<tr>
<th>Project</th>
<th>Environment</th>
<th>Data1</th>
<th>Multiple Data</th>
</tr>
<tr>
<td>project1</td>
<td>prod</td>
<td>project1data</td>
<td>
<table>
<tr>
<td>project1 multi row data2</td>
</tr>
<tr>
<td>project1 multi row data2</td>
</tr>
<tr>
<td>project1 multi row data2</td>
</tr>
<tr>
<td>project1 multi row data2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>project2</td>
<td>prod</td>
<td>project1data</td>
<td>
<table>
<tr>
<td>project1 multi row data2</td>
</tr>
<tr>
<td>project1 multi row data2</td>
</tr>
<tr>
<td>project1 multi row data2</td>
</tr>
<tr>
<td>project1 multi row data2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>project3</td>
<td>prod</td>
<td>project1data</td>
<td>
<table>
<tr>
<td>project1 multi row data2</td>
</tr>
<tr>
<td>project1 multi row data2</td>
</tr>
<tr>
<td>project1 multi row data2</td>
</tr>
<tr>
<td>project1 multi row data2</td>
</tr>
</table>
</td>
</tr>
</table>
I want to hide the border for a specific rows of a table.How to do it?
Any Idea?
Sample code is Highly Appreciated.
Use the CSS property border on the <td>s following the <tr>s you do not want to have the border.
In my example I made a class noBorder that I gave to one <tr>. Then I use a simple selector tr.noBorder td to make the border go away for all the <td>s that are inside of <tr>s with the noBorder class by assigning border: 0.
Note that you do not need to provide the unit (i.e. px) if you set something to 0 as it does not matter anyway. Zero is just zero.
table, tr, td {
border: 3px solid red;
}
tr.noBorder td {
border: 0;
}
<table>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr class="noBorder">
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>A3</td>
<td>A3</td>
</tr>
</table>
Here's the output as an image:
I use this with good results:
border-style:hidden;
It also works for:
border-right-style:hidden; /*if you want to hide just a border on a cell*/
Example:
<style type="text/css">
table, th, td {
border: 2px solid green;
}
tr.hide_right > td, td.hide_right{
border-right-style:hidden;
}
tr.hide_all > td, td.hide_all{
border-style:hidden;
}
}
</style>
<table>
<tr>
<td class="hide_right">11</td>
<td>12</td>
<td class="hide_all">13</td>
</tr>
<tr class="hide_right">
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr class="hide_all">
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
Here is the result:
Add programatically noborder class to specific row to hide it
<style>
.noborder
{
border:none;
}
</style>
<table>
<tr>
<th>heading1</th>
<th>heading2</th>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
</tr>
/*no border for this row */
<tr class="noborder">
<td>content1</td>
<td>content2</td>
</tr>
</table>
You can simply add these lines of codes here to hide a row,
Either you can write border:0 or border-style:hidden; border: none or it will happen the same thing
<style type="text/css">
table, th, td {
border: 1px solid;
}
tr.hide_all > td, td.hide_all{
border: 0;
}
}
</style>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr class= hide_all>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
running these lines of codes can solve the problem easily