Set text layout in table html column - html

have a question. How to set the column layout so that the writing is parallel to the top, here is the code:
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 10%;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland Netherland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
I want a layout like the following, I want the second column text aligned with the first column:


make a vertical-align: top rule for th
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
td{
vertical-align: top;
}
table {
border-collapse: collapse;
width: 10%;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland Netherland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>


You should target the 2nd child and set vertical align to top
table tr td:nth-child(2) {
vertical-align: top
}
Live example
table,
td,
th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 10%;
}
th {
text-align: left;
}
table tr td:nth-child(2) {
vertical-align: top
}
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland Netherland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Reference
:nth-child()
vertical-align

Related

How to position a table in right side of screen using HTML?

How to position a table on the right side of the screen? The desired output looks like this:
table on the right
How do we pull it off? Thanks!
The code I used is:
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>

sometimes reading documentation may be useful
table,
th,
td {
border: 1px solid black;
}
table {
float: right;
}
<table>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>

You can make the table right side by using following code:
table{
width: auto;
float: right;
}
table {
width: auto;
float: right;
}
<html>
<body>
<table>
<tr>
<td>
Item 1
</td>
<td>
Item 2
</td>
</tr>
</table>
</body>
</html>

The needed code to pull it off is:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
table, th, td {
border: 1px solid black;
}
table {float: right;}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">Ouch</th>
</tr>
<tr>
<th colspan="2"><img src=AAAAAHjpg" alt="Posporo" width="300" height="300"></th>
</tr>
<tr>
<th colspan="2">Professional</th>
</tr>
<tr>
<th>Affiliation</th>
<td>Mafia</td>
</tr>
<tr>
<th>Profession</th>
<td>Eater</td>
</tr>
<tr>
<th>Partner</th>
<td>You</td>
</tr>
<tr>
<th>Base</th>
<td>Somewhere</td>
</tr>
<tr>
<th colspan="2">Personal</th>
</tr>
<tr>
<th>Education</th>
<td>Pamantasan ng Unibersidad ng Paaralan</td>
</tr>
<tr>
<th colspan="2">Signature</th>
</tr>
<tr>
<th colspan="2">gd jasdagjadgjd</th>
</tr>
</table>
</body>
</html>

HTML table design does not render well on Outlook?

I have the following HTML table code:
<html>
<head>
<style>
table {
border-spacing: 0;
}
thead tr {
background: #36304a;
color: #fff;
}
thead th {
padding: 10px 25px;
}
thead th:first-child {
border-top-left-radius: 10px;
}
thead th:last-child {
border-top-right-radius: 10px;
}
tbody tr:nth-child(even) {
background: #f5f5f5;
}
tbody td {
padding: 10px 0 10px 25px;
}
.table-container {
margin-bottom: 20px;
}
.error {
background: #ff6d6c;
}
.success {
background: #c4e0b5;
}
.round-bottom {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr>
<th>Criteria</th>
<th>Expected Value</th>
<th>Result</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Abc</td>
<td>200</td>
<td>500</td>
<td>Fail</td>
</tr>
<tr>
<td>kuku</td>
<td>200</td>
<td>500</td>
<td>OK</td>
</tr>
<tr>
<td>lulu</td>
<td>200</td>
<td>500</td>
<td>OK</td>
</tr>
<tr>
<td colspan="4" class="round-bottom error">
gilbert
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-container">
<table>
<thead>
<tr>
<th>Criteria</th>
<th>Expected Value</th>
<th>Result</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Abc</td>
<td>200</td>
<td>500</td>
<td>Fail</td>
</tr>
<tr>
<td>kuku</td>
<td>200</td>
<td>500</td>
<td>OK</td>
</tr>
<tr>
<td>lulu</td>
<td>200</td>
<td>500</td>
<td>OK</td>
</tr>
<tr>
<td colspan="4" class="round-bottom success">
gilbert
</td>
</tr>
</tbody>
</table>
</div>
</body>
When viewing the email on Outlook, the table does not render properly:
However, on Outlook on the Web it looks fine.
I read online that Outlook uses Word to render HTML, and it has some limitations - but I'm not sure how to get around these. I tried modifying background property to background-color but it didn't do the trick.

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>

Border around a specific column in a table in 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>

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