Center Two Tables, Add Gap, and Keep Aligned HTML - html

I'm trying to get the below HTML code to show the two tables in the center of the page with a slightly larger space between them and top vertical alignment because they may not have the number of rows in each table so i want them.
I've managed to get it top aligned but I can't seem to get them centered on the page. Any help would be appreciated.
<style>
html,
body {
height: 100%;
}
#tbl1 {
height: 100%;
width: 100%;
display: table;
}
#tbl2 {
vertical-align: top;
display: table-cell;
height: 100%;
}
#mytbl {
display: inline-table;
margin: 0 auto;
}
</style>
<div id="tbl1">
<div id="tbl2">
<table id="mytbl" border="1">
<tr>
<th style="font-size:25px" colspan="4" align="center" valign="middle">TN Staff</th>
</tr>
<tr>
<th style="font-size:20px">Name</th>
<th style="font-size:20px">Job Title</th>
<th style="font-size:20px">Office</th>
<th style="font-size:20px">Cell</th>
</tr>
<tr>
<td><strong>John Smith</strong>
</td>
<td>Director of Operations</td>
<td align="center">123-555-4567</td>
<td align="center">123-555-0123</td>
</tr>
</table>
<table id="mytbl" border="1">
<tr>
<th style="font-size:25px" colspan="4" align="center" valign="middle">VA Staff</th>
</tr>
<tr>
<th style="font-size:20px">Name</th>
<th style="font-size:20px">Job Title</th>
<th style="font-size:20px">Office</th>
<th style="font-size:20px">Cell</th>
</tr>
<tr>
<td><strong>Jane Doe</strong>
</td>
<td>Director of Operations</td>
<td align="center">321-555-7654</td>
<td align="center">321-555-3210</td>
</tr>
</table>
</div>
</div>


Make sure you add this
#tbl2{
text-align: center;
}
#mytbl{
margin: 20px 0;
}
Here's the full code:
html,
body {
height: 100%;
}
#tbl1 {
height: 100%;
width: 100%;
display: table;
}
#tbl2 {
vertical-align: top;
text-align: center;
display: table-cell;
height: 100%;
}
#mytbl {
display: inline-table;
margin: 20px 0;
;
}
<div id="tbl1">
<div id="tbl2">
<table id="mytbl" border="1">
<tr>
<th style="font-size:25px" colspan="4" align="center" valign="middle">TN Staff</th>
</tr>
<tr>
<th style="font-size:20px">Name</th>
<th style="font-size:20px">Job Title</th>
<th style="font-size:20px">Office</th>
<th style="font-size:20px">Cell</th>
</tr>
<tr>
<td><strong>John Smith</strong>
</td>
<td>Director of Operations</td>
<td align="center">123-555-4567</td>
<td align="center">123-555-0123</td>
</tr>
</table>
<br>
<table id="mytbl" border="1">
<tr>
<th style="font-size:25px" colspan="4" align="center" valign="middle">VA Staff</th>
</tr>
<tr>
<th style="font-size:20px">Name</th>
<th style="font-size:20px">Job Title</th>
<th style="font-size:20px">Office</th>
<th style="font-size:20px">Cell</th>
</tr>
<tr>
<td><strong>Jane Doe</strong>
</td>
<td>Director of Operations</td>
<td align="center">321-555-7654</td>
<td align="center">321-555-3210</td>
</tr>
</table>
</div>
</div>
Advice: Don't use inline styles and do not place your style in the same document as your html code . Use a .css document to put all your styles and just add this in your html document( in head ):
<link rel="stylesheet" type="text/css" href="styles.css" media="all">


try this :
<style>
html, body {
height: 100%;
}
#tbl1 {
display: table;
height: 100%;
margin-left: auto;
margin-right: auto;
width: 960px;
}
#tbl2 {
vertical-align: top;
display: table-cell;
height: 100%;
}
#mytbl {
display: inline-table;
margin: 0 auto 0 20px;
}
</style>
<div id="tbl1">
<div id="tbl2">
<table id="mytbl" border="1">
<tr>
<th style="font-size:25px" colspan="4" align="center" valign="middle">TN Staff</th>
</tr>
<tr>
<th style="font-size:20px">Name</th>
<th style="font-size:20px">Job Title</th>
<th style="font-size:20px">Office</th>
<th style="font-size:20px">Cell</th>
</tr>
<tr>
<td><strong>John Smith</strong></td>
<td>Director of Operations</td>
<td align="center">123-555-4567</td>
<td align="center">123-555-0123</td>
</tr>
</table>
<table id="mytbl" border="1">
<tr>
<th style="font-size:25px" colspan="4" align="center" valign="middle">VA Staff</th>
</tr>
<tr>
<th style="font-size:20px">Name</th>
<th style="font-size:20px">Job Title</th>
<th style="font-size:20px">Office</th>
<th style="font-size:20px">Cell</th>
</tr>
<tr>
<td><strong>Jane Doe</strong></td>
<td>Director of Operations</td>
<td align="center">321-555-7654</td>
<td align="center">321-555-3210</td>
</tr>
</table>
</div>
</div>
here is a test: http://jsfiddle.net/on0xmmhq/
hope this help you

Related

How can I set all my li in the middle so they align properly

I want to give a spec table for the Watch 4. For now, I have this code.
<div class="specs">
<ul class="info">
<li>Lengte</li>
<li>44 mm</li>
</ul>
</div>
<div class="specs">
<ul class="info">
<li>Breedte</li>
<li>43.3 mm</li>
</ul>
</div>
with this CSS code
.specs{
position: relative;
top: 20px;
display: flex;
flex-direction: row;
align-items: center;
}
.info{
display: flex;
flex-direction: row;
color: black;
align-items: center;
margin-left: auto;
margin-right: auto;
border-bottom: 1px black solid;
padding: 0;
}
.info li{
display: flex;
flex-direction: row;
margin-right: 200px;
margin-left: 200px;
}
Here is the full project https://jsfiddle.net/2wvfyg16/
You might have to make the CSS tab bigger.
All the way at the bottom at the tab "Verbindungen".
It is all miss aligned.

As the data appears to be tabular, this snippet is a simple start on setting out the two columns with spacing in an HTML table.
Obviously you'll want to change things to give the exact layout your want but it does demonstrate that an HTML table can give the sort of formatting required.
#specs {
width: 100vw;
border-collapse: collapse;
}
#specs th {
font-size: 3em;
text-align: left;
padding-top: 1em;
}
#specs td {
width: 50%;
padding: 1em 5em;
}
#specs td {
font-size: 2em;
}
#specs tr:not(.cat) {
border-bottom: solid 1px black;
padding: 1em;
}
<table id="specs">
<tr class="cat">
<th colspan="2">Formaat</th>
</tr>
<tr>
<td>Lengte</td>
<td>44 mm</td>
<tr>
<td>Breedte</td>
<td>43.3 mm</td>
</tr>
<tr>
<td>Hoogte</td>
<td>9.8 mm</td>
</tr>
<tr>
<td>Gewicht</td>
<td>30 gram</td>
</tr>
<tr>
<td>Stofdicht</td>
<td>Ja</td>
</tr>
<tr>
<td>Spatwaterdicht</td>
<td>Ja</td>
</tr>
<tr>
<td>Waterdicht</td>
<td>Ja</td>
</tr>
<tr class="cat" colspan="2">
<th colspan="2">Display</th>
</tr>
<tr>
<td>Schermgrootte</td>
<td>40 & 44 mm</td>
</tr>
<tr>
<td>Schermtype</td>
<td>OLED</td>
</tr>
<tr class="cat" colspan="2">
<th colspan="2">Processor</th>
</tr>
<tr>
<td>Chipset</td>
<td>Samsung Exynos W920</td>
</tr>
<tr>
<td>Opslagcapaciteit</td>
<td>16 GB</td>
</tr>
<tr>
<td>Werkgeheugen</td>
<td>1500 MB</td>
</tr>
<tr class="cat" colspan="2">
<th colspan="2">Software</th>
</tr>
<tr>
<td>Besturingssysteem</td>
<td>One UI Watch</td>
</tr>
<tr class="cat" colspan="2">
<th colspan="2">Sensoren</th>
</tr>
<tr>
<td>Accelerometer</td>
<td>Jas</td>
</tr>
<tr>
<td>Hartslagmeter</td>
<td>Ja</td>
</tr>
<tr>
<td>Gyroscoop</td>
<td>Ja</td>
</tr>
<tr>
<td>GPS</td>
<td>Ja</td>
</tr>
<tr class="cat" colspan="2">
<th colspan="2">Batterij</th>
</tr>
<tr>
<td>Capaciteit</td>
<td>361 mAh</td>
</tr>
<tr>
<td>Vervangbaar</td>
<td>Nee</td>
</tr>
<tr class="cat" colspan="2">
<th colspan="2">Verbindingen</th>
</tr>
<tr>
<td>WiFi</td>
<td>Ja</td>
</tr>
<tr>
<td>Mobiel Netwerk</td>
<td>Nee</td>
</tr>
<tr>
<td>Bluetooth</td>
<td>Bluetooth 5.0</td>
</tr>
<tr>
<td>NFC</td>
<td>Ja</td>
</tr>
</table>

use justify items center i think it would work for that problem

How to add multiple header HTML table?

I want to Design a table that has multiple headers. The table design is there:

Have a look at this fiddle
All about colspan and rowspan
<table>
<thead>
<tr>
<th rowspan="2" colspan="1" >
Client Name
</th>
<th rowspan="2" colspan="1">
Date
</th>
<th rowspan="1" colspan="5">
All Appointments
</th>
<th rowspan="1" colspan="3" >
Fulfilled Appointments
</th>
</tr>
<tr>
<th>Total number of individual appointments</th>
<th >Hours Of Care Delivered</th>
<th>Total Value</th>
<th>Average Cost Per Hour</th>
<th>Average Cost Per Hour Per Carer</th>
<th>Total Number</th>
<th>Hours Of Care Fulfilled</th>
<th>Total Value</th>
</tr>
</thead>
<tbody></tbody>
</table>

<html>
<head>
<title>Table</title>
<style>
table,th,td {
border: 2px solid red;
border-collapse: collapse;
}
.heightu{
height: 212px;
}
div.First {
border: 1px solid red;
width: 49px;
height:10px;
left: 15px;
}
div.Second {
border: 1px solid red;
width: 49px;
height:10px;
left: 15px;
}
div.Third {
border: 1px solid red;
width: 39px;
height:10px;
left: 15px;
}
</style>
</head>
<body>
<table>
<tr>
<th rowspan="2">Sl.No</th>
<th rowspan="2">Name</th>
<th colspan="2">Date:15/05/2021</th>
<th rowspan="2">Do </th>
</th>
</tr >
<tr>
<th rowspan=>Start Hour</th>
<th rowspan=>End Hour</th>
</tr>
<tr>
<td>1</td>
<td>John Ddoe</td>
<td ><div class="First"></div></td>
<td><div class="Second"> </div></td>
<td><div class="Third"></div></td>
</tr>
<tr class="heightu">
<td></td>
<td></td>
</td>
<td ></td>
<td ></td>
<td ></td>
</tr>
</table>
</body>
</html>

How can I construct a table header than contains multiple rows in column?

I would like to construct a table as follows:
I am trying to construct same table in html but having trouble. Table header needs to be exact. Any help is helpful

You can use the rowspan attribute:
th {
border:1px solid #000;
height: 20px;
width: 150px;
}
<table>
<thead>
<tr>
<th rowspan="4">#</th>
<th>Name</th>
<th rowspan="2">Permanent Address</th>
<th rowspan="2">Type of Job</th>
<th rowspan="2">Start work</th>
</tr>
<tr>
<th>ID</th>
</tr>
<tr>
<th>M/F</th>
<th rowspan="2">Contract</th>
<th rowspan="2">Place of Work</th>
<th rowspan="2">Work Stops</th>
</tr>
<tr>
<th>Birth</th>
</tr>
</thead>
</table>
FYI: there is also a colspan attribute if you need to span multiple columns.

Try this......
body {
padding: 50px;
}
table {
width: 100%;
border-collapse: collapse;
}
td,
th {
padding: 10px;
border: 1px solid black;
}
<table>
<tbody>
<tr>
<td rowspan="4">#</td>
<td>Name</td>
<td rowspan="2">Permanent Address</td>
<td rowspan="2">Type of Job</td>
<td rowspan="2">Start work</td>
</tr>
<tr>
<td>ID</td>
</tr>
<tr>
<td>M/F</td>
<td rowspan="2">Contract</td>
<td rowspan="2">Place of Work</td>
<td rowspan="2">Work Stops</td>
</tr>
<tr>
<td>Birth</td>
</tr>
</tbody>
</table>

Hide table columns by class

I have a table from n columns. Each cell has a class column-n.
I want to add on table class hide-column-n and hide all cells with class column-n.
Is this possible do it through css?
Example:
.table {
border: 1px solid black;
}
.table thead{
background-color: lightgray;
}
.table td{
border: 1px solid gray;
width: 50px;
}
<table class="table">
<thead>
<tr>
<td class="column-1">One</td>
<td class="column-2">Two</td>
<td class="column-3">Three</td>
<td class="column-x">...</td>
<td class="column-n">N</td>
</tr>
</thead>
<tbody>
<tr>
<td class="column-1">One</td>
<td class="column-2">Two</td>
<td class="column-3">Three</td>
<td class="column-x">...</td>
<td class="column-n">N</td>
</tr>
<tr>
<td class="column-1">One</td>
<td class="column-2">Two</td>
<td class="column-3">Three</td>
<td class="column-x">...</td>
<td class="column-n">N</td>
</tr>
<tr>
<td>...</td>
</tr>
</tbody>
</table>

Here is example https://jsfiddle.net/xr21kwrh/
<table class="table">
<thead>
<tr>
<th class=column-1">One</th>
<th class"column-2">Two</th>
...
<th class="column-n">N</th>
</tr>
</thead>
<tbody>
<tr>
<td class=column-1">One</t>
<td class"column-2">Two</td>
...
<td class="column-n">N</td>
</tr>
<tr>
<td class=column-1">One</t>
<td class"column-2">Two</td>
...
<td class="column-n">N</td>
</tr>
...
</tbody>
</table>
<style>
th:nth-child(2){display: none;}
td:nth-child(2){display: none;}
</style>

<table class="table">
<thead>
<tr>
<th class=column-1">One</th>
<th class"column-2">Two</th>
...
<th class="column-n">N</th>
</tr>
</thead>
<tbody>
<tr>
<td class=column-1">One</t>
<td class"column-2">Two</td>
...
<td class="column-n">N</td>
</tr>
<tr>
<td class=column-1">One</t>
<td class"column-2">Two</td>
...
<td class="column-n">N</td>
</tr>
...
</tbody>
</table>
<style>
.column-n{ display-none !important; }
</style>

If you use sass/scss you can do so (in SCSS):
#for $i from 1 through 10 {
.hide-column-#{$i} .column-#{$i} {
display: none;
}
}
it will compile to:
.hide-column-1 .column-1 {
display: none;
}
.hide-column-2 .column-2 {
display: none;
}
....
.hide-column-n .column-n {
display: none;
}
then use it like expected:
<table class="table hide-column-1 hide-column-2">
codepen demo here

Bootstrap Table - Move cell to the right to properly display the total

Good evening, I'm trying to align a table to make it like the picture, but failed to do so, I could help?
Now I have it like this:
and I'd like it to look like this:
This is my html code:
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="text-left">Codigo</th>
<th class="text-left">Descripcion</th>
<th class="text-left">Precio</th>
<th class="text-left">Cantidad</th>
<th class="text-left">Importe</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-1">1001</td>
<td class="col-md-8">Producto de ejemplo 1</td>
<td class="col-md-1 text-right">$10,000</td>
<td class="col-md-1 text-center">100</td>
<td class="col-md-1 text-right">$1,000,000</td>
</tr>
<tr>
<th class="text-right" scope="row">TOTAL</th>
<td class="text-right">$1,000,000</td>
</tr>
</tbody>
</table>

Specifying the colspan for the cells in the summary row will shift the final cell right.
<th colspan="4" class="text-right" scope="row">TOTAL</th>
Alternatively, you could start the row with a <td> with colspan="3", and using a class that would have no borders (controlled by your css).
<td colspan="3" class="noborders"></td>
<th class="text-right" scope="row">TOTAL</th>
Without that class, direct manipulation of style may work.
<td style="border:0" colspan="3"></td>
<th class="text-right" scope="row">TOTAL</th>
Updated snippet:
table {
border-collapse: collapse;
font-family: arial;
}
td,
th {
width: auto;
margin: 2px;
padding: 3px;
text-align: left;
border: 1px solid grey;
}
.noborders {
border: 0;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="text-left">Codigo</th>
<th class="text-left">Descripcion</th>
<th class="text-left">Precio</th>
<th class="text-left">Cantidad</th>
<th class="text-left">Importe</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-1">1001</td>
<td class="col-md-8">Producto de ejemplo 1</td>
<td class="col-md-1 text-right">$10,000</td>
<td class="col-md-1 text-center">100</td>
<td class="col-md-1 text-right">$1,000,000</td>
</tr>
<tr>
<td colspan="3" class="noborders"></td>
<th class="text-right" scope="row">TOTAL</th>
<td class="text-right">$1,000,000</td>
</tr>
</tbody>
</table>