I want to make 1 table to look like 2 tables where they are on top of each other with a little space between them. Each table has the same number of columns, but the text they contain can differ. And each table can contain many rows. I need this because i need columns of both tables always to be the same width. How do i achieve this? I need that Empty row's side borders to hide
<table>
<tr> <!-- First table rows --> </tr>
<td>text</td>
<td>text</td>
<tr> <!-- Empty space between tables --> </tr>
<tr> <!-- Second table rows --> </tr>
<td>text</td>
<td>text</td>
Just use a single <td> element with a specific height as a separator, and use border-collapse to mimic what you're looking for:
table {
border-collapse: collapse;
}
table td {
border: 1px solid #000;
}
table td.separator {
border: none;
height: 40px;
}
<table>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td colspan="2" class="separator"></td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
</table>
You can use css for this. border-spacing
Change 45px for sizing
table {
border-collapse: collapse;
}
th {
background-color: red;
Color:white;
}
th, td {
width:150px;
text-align:center;
border:1px solid black;
padding:5px
}
.geeks {
border-right:hidden;
}
.gfg {
border-collapse:separate;
border-spacing:0 45px;
}
h1 {
color:green;
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<center>
<h2>Row spacing in a table</h2>
<table>
<tr>
<th>Employee ID</th>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
</tr>
</table>
<table class = "gfg">
<tr>
<td class = "geeks">10001</td>
<td>Thomas</td>
<td>M</td>
<td>32</td>
</tr>
<tr>
<td class = "geeks">10002</td>
<td>Sally</td>
<td>F</td>
<td>28</td>
</tr>
<tr>
<td class = "geeks">10003</td>
<td>Anthony</td>
<td>M</td>
<td>24</td>
</tr>
</table>
</center>
</body>
</html>
You could use something like shown below. The colspan="4" on table-spacing td specifies how many columns the cell should span.
Advice
However if the data is really different from each other I would recommend actually using two different tables instead of two . It make it easier for screen readers to distinct the data from each other. To improve this further you can use table headers to improve your accessibility even more.
Source: https://www.w3schools.com/tags/tag_thead.asp
.table {
border-collapse: collapse;
}
.table-spacing td {
border: none;
height: 15px; /* Increase/descrease for white-space between 'tables' */
}
td {
padding: 6px;
border: 1px solid black;
}
<table class="table">
<tr>
<td> Cel 1</td>
<td> Cel 2</td>
<td> Cel 3</td>
<td> Cel 4</td>
<tr>
<tr>
<td> Cel 5</td>
<td> Cel 6</td>
<td> Cel 7</td>
<td> Cel 8</td>
<tr>
<tr class="table-spacing"><td colspan="4"></td></tr>
<tr>
<td> Cel 1</td>
<td> Cel 2</td>
<td> Cel 3</td>
<td> Cel 4</td>
<tr>
<tr>
<td> Cel 5</td>
<td> Cel 6</td>
<td> Cel 7</td>
<td> Cel 8</td>
<tr>
</table>
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 need to create this table with html, but I don't understand yet how to separate the different rows.
colspan
This attribute contains a non-negative integer value that indicates for how many columns the cell extends. Its default value is 1. Values higher than 1000 will be considered as incorrect and will be set to the default value (1)
rowspan
This attribute contains a non-negative integer value that indicates for how many rows the cell extends. Its default value is 1; if its value is set to 0, it extends until the end of the table section (, , , even if implicitly defined), that the cell belongs to. Values higher than 65534 are clipped down to 65534.
colspan & rowspan documentation
table {
width: 100%;
max-width: 800px;
}
td,
th {
padding: 10px;
}
.center {
text-align: center;
}
.left {
text-align: left;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
.max {
width: 60%;
}
.min {
width: 40%;
}
<table>
<tr>
<th class="left">Project</th>
<td colspan="4">Marketplace 1</td>
</tr>
<tr>
<th class="left">Group</th>
<td colspan="4">Group 1</td>
</tr>
<tr>
<th rowspan="5" class="left">Members</th>
<th class="max">Name</th>
<th class="min">Role</th>
<tr>
<td>Name 1</td>
<td>Scrum Master</td>
<tr>
<td>Name 2</td>
<td>Developer</td>
</tr>
<tr>
<td>Name 3</td>
<td>Developer</td>
</tr>
<tr>
<td>Name 4</td>
<td>Developer / Devops</td>
</tr>
</tr>
</table>
A friend helped me with this, it's the same table but in Spanish:
<table>
<tr>
<th>Proyecto</th>
<td colspan="2">Marketplace 1</td>
</tr>
<tr>
<th>Grupo</th>
<td colspan="2">Grupo 17</td>
</tr>
<tr>
<tr>
<th rowspan="5">Integrantes</th>
<th>Nombre</th>
<th>Rol</th>
</tr>
<tr>
<td>Carlos Figueredo Triana</td>
<td>Developer</td>
</tr>
<tr>
<td>Carlos Figueredo Triana</td>
<td>Developer</td>
</tr>
<tr>
<td>Carlos Figueredo Triana</td>
<td>Developer</td>
</tr>
<tr>
<td>Carlos Figueredo Triana</td>
<td>Developer</td>
</tr>
</table>
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
So it is pretty straight forward. I need a way to group cells together. Like a <div> or a <span> but none of them worked. <tbody> seemed like a good solution but it only works for table rows. Help!
If you're looking for a way to merge 2 o more cells in a row into one single cell, along with other "regular" cells (as you would do in a google|excel spreadsheet) in a way similar to this:
then you can use the colspan attribute for td elements, indicating how many cells are you merging:
<tr>
<td colspan=2> Merged Cell occupying 2 columns </td>
</tr>
<tr>
<td> Regular cell </td>
<td> Another cell in same row </td>
</tr>
Additionally, you can use the td[colspan] selector in css (combined with any parent selector of your choice) to refer to these merged cells.
Here's a working example:
/* Style for cells with any colspan attribute */
td[colspan] {
text-align: center;
}
/* No extra space between cells */
table {
border-collapse: collapse;
}
th, td {
border: 1px solid gray;
margin: 0;
padding: 3px 10px;
text-align: right;
}
<table>
<tr>
<th>Day</th>
<th>Invoice</th>
<th>Total</th>
</tr>
<tr>
<!-- this cell will occupy 3 columns -->
<td colspan=3>January</td>
</tr>
<tr>
<td>2</td>
<td>0348</td>
<td>248.35</td>
</tr>
<tr>
<td>7</td>
<td>0349</td>
<td>126.14</td>
</tr>
<tr>
<td>18</td>
<td>0350</td>
<td>821.99</td>
</tr>
<tr>
<td colspan=3>February</td>
</tr>
<tr>
<td>27</td>
<td>0351</td>
<td>643.50</td>
</tr>
</table>
You can add the html col tag to group the columns td.
.col-group-1 {
background-color: yellow;
}
.col-group-2 {
background-color: silver;
}
<table>
<colgroup>
<col class="col-group-1">
<col span="2" class="col-group-2">
</colgroup>
<tr>
<th>Name</th>
<th>City</th>
<th>Phone</th>
</tr>
<tr>
<td>Mary</td>
<td>New york</td>
<td>987654321</td>
</tr>
<tr>
<td>Magdalena</td>
<td>Los Angeles</td>
<td>123456789</td>
</tr>
</table>
</body>
</html>
Please check out the html col tag
and how to use them with css styling