Border around a specific column in a table in HTML - html

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>

Related

Make 1 table look like 2 on top of each other

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>

Add vertical scroll wheel to HTML table

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>

HTML & CSS: How to put a line between some rows of tables but not all

I want to have lines between some of the rows in my table, but not all of them. I have tried many ways of doing it but something weird always happens. What I have so far is this:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<table width=100%>
<tr id="border-top" align="center"><th>A</th><td>B</td></tr>
<tr id="border-top" align="center"><th>1</th><td>11</td></tr>
<tr align="center"><th>2</th><td>12</td></tr>
<tr id="border-top" align="center"><th>3</th><td>13</td></tr>
<tr id="border-top" align="center"><th>4</th><td>14</td></tr>
<tr align="center"><th>5</th><td>15</td></tr>
<tr id="border-top" align="center"><th>6</th><td>16</td></tr>
<tr id="border-top" align="center"><th>7</th><td>17</td></tr>
</table>
</body>
</html>
And this CSS:
#border-top{
text-align:center;
border-top:1px solid black;
display:block;
}
But my output looks like this with the line display:block;
Or like this without it:
I want the lines to be there like in the first picture. But I want them to all be properly aligned like in the second picture. How should I be going about doing this instead?
Thanks in advance!

First, id attributes should be unique in your page. In other words, you should have only one id (with the same value) per page. Use class instead for this particular use case (i.e. multiple elements to share the same CSS class)
Second, the tr themselves will not get decorated with your CSS. Try decorating the ths and the tds.
You can can do so by adding this to your CSS rule:
.border-top td, .border-top th{...}
See example below:
.border-top td, .border-top th {
border-top: 1px solid green;
}
table {
border-spacing: 0px;
}
<table width="100%">
<tr class="border-top" align="center">
<th>A</th>
<td>B</td>
</tr>
<tr class="border-top" align="center">
<th>1</th>
<td>11</td>
</tr>
<tr align="center">
<th>2</th>
<td>12</td>
</tr>
<tr class="border-top" align="center">
<th>3</th>
<td>13</td>
</tr>
<tr class="border-top" align="center">
<th>4</th>
<td>14</td>
</tr>
<tr align="center">
<th>5</th>
<td>15</td>
</tr>
<tr class="border-top" align="center">
<th>6</th>
<td>16</td>
</tr>
<tr class="border-top" align="center">
<th>7</th>
<td>17</td>
</tr>
</table>

table {
border-collapse: collapse;
width: 100%;
}
th, td{
text-align: left;
padding: 8px;
}
th {
border-bottom: 1px solid #000;
border-top: 1px solid #000;
}
<table>
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>2</td>
<td>12</td>
</tr>
<tr>
<td>2</td>
<td>12</td>
</tr>
<tr>
<td>2</td>
<td>12</td>
</tr>
<tr>
<td>2</td>
<td>12</td>
</tr>
<tr>
<th>2</th>
<th>12</th>
</tr>
</table>

Creating sub-rows in a row with html

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

How to hide the border for specified rows of a 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