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>
Related
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 trying to query my html table but somehow it did not show correctly.
First row is correct.
Second row start from No.1,16/Sept/2020,36.5,Q1- Y,Q2- Y,Q3- YQ4- Y did not follow up the First row.
Please see my jsFiddle for better understanding.
<style>
table, th, td {
border: 1px solid black;
}
</style>
<table>
<tr>
<td rowspan=4>S/No.</td>
<td rowspan=6>Date</td>
<td rowspan=3>Temperature</td>
<td colspan=4>Please answer the above 4 questions</td>
<td rowspan=8>Submit</td>
</tr>
<tr>
<td >Q1</td>
<td >Q2</td>
<td >Q3</td>
<td >Q4</td>
</tr>
<tr>
<td colspan=4>Y - Yes , N- No</td>
</tr>
<tr>
<td>No 1</td>
<td>16/Sept/2020</td>
<td>36.5</td>
<td>Q1- Y</td>
<td>Q2- Y</td>
<td>Q3- Y</td>
<td>Q4- Y</td>
</tr>
</table>
Hope this is what you are looking for.
table, th, td {
border: 1px solid black;
}
<table>
<tr>
<td rowspan=3>S/No.</td>
<td rowspan=3>Date</td>
<td rowspan=3>Temperature</td>
<td colspan=4>Please answer the above 4 questions</td>
<td rowspan=4>Submit</td>
</tr>
<tr>
<td >Q1</td>
<td >Q2</td>
<td >Q3</td>
<td >Q4</td>
</tr>
<tr>
<td colspan=4>Y - Yes , N- No</td>
</tr>
<tr>
<td>No 1</td>
<td>16/Sept/2020</td>
<td>36.5</td>
<td>Q1- Y</td>
<td>Q2- Y</td>
<td>Q3- Y</td>
<td>Q4- Y</td>
</tr>
</table>
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>
I need to make markup for creating the next table (using HTML):
task
Here is my way of making that (doesn't work):
Step 1: Making "general" markup with all cells of equal size:
td { border: solid #aaa 1px }
<table>
<thead>
<tr>
<th colspan="4">Some Table</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
</tr>
</tbody>
</table>
Output: Step 1
Step 2: Using "colspan" and "rowspan" for making cells 1.3 and 2.1 bigger and deleting unnecessary cells (1.4, 2.3, 2.4, 3.3 and 3.4), except one (2.2 , just for now): Step 2
Step 3: As soon as I delete cell 2.2 - big cells (1.3 and 2.1) become "smaller": Step 3 and it isn't what I need...
Here is my final markup:
td { border: solid #aaa 1px }
<table>
<thead>
<tr>
<th colspan="4">Some Table</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>1.2</td>
<td colspan="2" rowspan="2">1.3</td>
</tr>
<tr>
<td colspan="2" rowspan="2">2.1</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
</tr>
</tbody>
</table>
I can't find out how to delete cell 2.2 and keep table's shape as it mentioned in the task... Appreciate any help.
Here is we Achieve the Output
table,
tr,
td {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
tr {
height: 30px;
}
td {
height: 30px;
width: 50px;
text-align: center;
}
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
<td colspan="2" rowspan=2>1.3</td>
</tr>
<tr>
<td colspan="2" rowspan="2">2.1</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
</tr>
</table>
You should try to this code
td {
border: 1px solid #579;
}
<table>
<tbody>
<tr>
<td>1.1</td>
<td>1.2</td>
<td colspan="2">1.3</td>
</tr>
<tr>
<td colspan="2" rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
</tr>
</tbody>
</table>
You should try this
<style>td{border:1px solid black;}
tr{height:35px;}
</style>
<table>
<tbody>
<tr>
<td colspan="4">Head</td>
</tr>
<tr>
<td>1.1</td>
<td>1.2</td>
<td colspan="2" rowspan="2">1.3</td>
</tr>
<tr>
<td colspan="2" rowspan="2">2</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
</tr>
</tbody>
</table>
I have a table with rowspan in first cells of row. I want to select first cells. When I select first child, in some rows after rowspan, first child going to be cells that are not in first row.
How to select just first column of table?
Here is my JSFIDDLE http://jsfiddle.net/qw78pcud/
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
table{
font-size: 18px;
color: black;
}
table tr td:first-child{
color: red;
text-align: center;
}
<table>
<thead>
<tr>
<th>Country</th>
<th>Bank Name</th>
<th>SWIFT BIG</th>
<th>Currency</th>
</tr>
</thead>
<tbody>
<tr>
<td>USA</td>
<td>Deutsche Bank Trust Company Americas, New Your</td>
<td>BKTRUS33</td>
<td>USD</td>
</tr>
<tr>
<td>Germany</td>
<td>Deutsche Bank AG</td>
<td>DEUTDEFF</td>
<td>EUR</td>
</tr>
<tr>
<td rowspan="2">Austria</td>
<td rowspan="2">Raiffeisen Bank International AG</td>
<td rowspan="2">RZBAATWW</td>
<td>EUR</td>
</tr>
<tr><td>USD</td></tr>
<tr>
<td rowspan="5">Netherlands</td>
<td rowspan="5">Demir - Halk Bank (Nederland) N.V.</td>
<td rowspan="5">DHBNNL2R</td>
<td >EUR</td>
</tr>
<tr><td>USD</td></tr>
<tr><td>GBP</td></tr>
<tr><td>CHF</td></tr>
<tr><td>JPY</td></tr>
</tbody>
</table>
I used following selector but it selects last childs after rowspan as jsfiddle shows
table tr td:first-child{
color: red;
text-align: center;
}
Note: I can't set class or id to table elements. I need to access with css.
Edit: What can we do in This case? http://jsfiddle.net/qw78pcud/6
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
table{
font-size: 18px;
color: black;
}
table tr td:first-child:not(:only-child) {
color: red;
text-align: center;
}
<table>
<thead>
<tr>
<th>Country</th>
<th>Bank Name</th>
<th>SWIFT BIG</th>
<th>Currency</th>
</tr>
</thead>
<tbody>
<tr>
<td>USA</td>
<td>Deutsche Bank Trust Company Americas, New Your</td>
<td>BKTRUS33</td>
<td>USD</td>
</tr>
<tr>
<td>Germany</td>
<td>Deutsche Bank AG</td>
<td>DEUTDEFF</td>
<td>EUR</td>
</tr>
<tr>
<td rowspan="2">Austria</td>
<td rowspan="2">Raiffeisen Bank International AG</td>
<td rowspan="2">RZBAATWW</td>
<td>EUR</td>
</tr>
<tr><td>USD</td></tr>
<tr>
<td rowspan="5">Netherlands</td>
<td rowspan="5">Demir - Halk Bank (Nederland) N.V.</td>
<td rowspan="5">DHBNNL2R</td>
<td >EUR</td>
</tr>
<tr><td>USD</td></tr>
<tr><td>GBP</td></tr>
<tr><td>CHF</td></tr>
<tr><td>JPY</td></tr>
<tr>
<td rowspan="10">Russia</td>
<td rowspan="3">CB “Garanti Bank – Moscow” (ZAO)</td>
<td rowspan="3">GABMRUMM</td>
<td >EUR</td>
</tr>
<tr><td>USD</td></tr>
<tr><td>RUB</td></tr>
<tr>
<td rowspan="2">Sberbank of Russia </td>
<td rowspan="2">SABRRUMM</td>
<td>USD</td>
</tr>
<tr><td>RUB</td></tr>
<tr>
<td rowspan="3">JSCB “Yapi Kredi Bank Moscow" (CJSC)</td>
<td rowspan="3">YKBMRUMM</td>
<td>EUR</td>
</tr>
<tr><td>USD</td></tr>
<tr><td>RUB</td></tr>
<tr>
<td rowspan="2">ZAO Raiffeisenbank </td>
<td rowspan="2">RZBMRUMM</td>
<td>USD</td>
</tr>
<tr><td>RUB</td></tr>
</tbody>
</table>
You could achieve that by using a combination of :not() and :only-child pseudo-classes as follows:
Example Here
table tr td:first-child:not(:only-child) {
color: red;
text-align: center;
}
This would exclude the cells that are the only child of their parents - the rows.