I want to customise my table row position like the image below. The table header should be aligned at same level but the elements inside should look like the image below.
Here's my code.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Destination</th>
<th>Speed</th>
</tr>
</thead>
<tbody>
<tr>
<td>Destination 1</td>
<td rowspan="1">5.0</td>
</tr>
<tr>
<td>Destination 2</td>
<td rowspan="1">5.0</td>
</tr>
<tr>
<td>Destination 3</td>
</tr>
</tbody>
</table>
</body>
</html>
td:not(:first-of-type) {
position: relative;
transform: translateY(50%);
}
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Destination</th>
<th>Speed</th>
</tr>
</thead>
<tbody>
<tr>
<td>Destination 1</td>
<td rowspan="1">5.0</td>
</tr>
<tr>
<td>Destination 2</td>
<td rowspan="1">5.0</td>
</tr>
<tr>
<td>Destination 3</td>
</tr>
</tbody>
</table>
</body>
</html>
Related
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>
I'm trying to add 3 columns under 'Top 10' table header but when I add values for cells everything gets corrupt
also there's an empty cell just before the 'ID' cell, I don't know where it came from
<html>
<head>
<title>ss</title>
<style>
table { width: 100%; border-collapse: collapse; }
td { border: 1px solid #000; }
</style>
</head>
<body>
<center>
<table border="1">
<thead>
<tr>
<th align="center">
<font face="Arial, Helvetica, sans-serif"></font>
</th>
<th align="center">
<font face="Arial, Helvetica, sans-serif">Site</font>
</th>
<th colspan="4" align="center">
<font face="Arial, Helvetica, sans-serif">Top 10</font>
</th>
</tr>
</thead>
<!-- Table Content -->
<tbody>
<tr>
<td align="center">
<font face="Arial, Helvetica, sans-serif">1</font>
</td>
<td align="center">
<font face="Arial, Helvetica, sans-serif">example</font>
</td>
<td>
<td>ID</td>
<td >Name</td>
<td>From</td>
</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
your help is appreciated
The HTML of your table is completely off. Make sure you use the right elements and close everything too. And try to apply styling with CSS as much as possible.
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
}
<table>
<thead>
<tr>
<th></th>
<th>Site</th>
<th colspan="3">Top 10</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">Example</td>
<td>ID</td>
<td>Name</td>
<td>From</td>
</tr>
<tr>
<td>1</td>
<td>Kobo</td>
<td>Jack</td>
</tr>
</tbody>
</table>
you really need to read html specification, font and center tags have several years obsolete, you need to use CSS instead
<!DOCTYPE html>
<html>
<head>
<title>ss</title>
<style>
body {font: "Arial, Helvetica, sans-serif"}
table { width: 90%; border-collapse: collapse; margin: 0 auto;}
td { border: 1px solid #000; }
td.center, th { text-align: center;}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th colspan="4">Header 3</th>
</tr>
</thead>
<!-- Table Content -->
<tbody>
<tr>
<td class="center">Cell 1</td>
<td class="center">Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</tbody>
</table>
</body>
</html>
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>
I am trying to build a very simple array, but somehow It is not working How I think it should. Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table width=100%>
<tr>
<th colspan="8">sigle row of 8 cols</th>
</tr>
<tr >
<td colspan="2">2 cols </td>
<td rowspan="3" colspan="6" > 6 cols</td>
</tr>
<tr>
<td colspan="2">2 cols</td>
</tr>
<tr>
<td colspan="2">2 cols</td>
</tr>
</table>
</body>
</html>
Please help me to debug.
I want the months to occupy only 2 column and the saving to occupy 6 columns (the rest), but, this is not working as expected. I know the answer is trivial, but I cannot find it. Can you please tell me what is wrong?
The table will have 8 columns, but you have effectively reduced it to 2. The table rendering algorithm will make things as efficient as it can.
By adding an additional row you can see what is happening
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table width=100%>
<tr>
<th colspan="8">Monthly Savings</th>
</tr>
<tr >
<td colspan="2">January</td>
<td rowspan="3" colspan="6" >$30000</td>
</tr>
<tr>
<td colspan="2">February</td>
</tr>
<tr>
<td colspan="2">March</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
</body>
</html>
What you are better off doing is assigning width to the columns
table, th, td {
border: 1px solid black;
}
<table width=100%>
<tr>
<th colspan="2">Monthly Savings</th>
</tr>
<tr >
<td style="width:33%">January</td>
<td rowspan="3" style="width:66%" >$30000</td>
</tr>
<tr>
<td>February</td>
</tr>
<tr>
<td>March</td>
</tr>
</table>
because the you add heading in single <th> so make id different
<th colspan="2">Monthly</th>
<th colspan="6">Savings</th>
so it will display 2 for month and 6 for saving
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table width=100%>
<tr>
<th colspan="2">Monthly</th>
<th colspan="6">Savings</th>
</tr>
<tr>
<td colspan="2">January</td>
<td rowspan="3" colspan="6">$30000</td>
</tr>
<tr>
<td colspan="2">February</td>
</tr>
<tr>
<td colspan="2">March</td>
</tr>
</table>
</body>
</html>
How would I achieve this table layout?
Here's a sample:
<!doctype html>
<html>
<head>
<title>Rows Demo </title>
<style>
table {
border: 1px solid black;
}
td {
border:1px solid blue;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan=2>Something</td>
<td rowspan=2>Something more</td>
<td>LastColumn</td>
</tr>
<tr>
<td>Column3</td>
</tr>
<tr>
<td rowspan=2>Something</td>
<td rowspan=2>Something more</td>
<td>LastColumn</td>
</tr>
<tr>
<td>Column3</td>
</tr>
</table>
</body>
</html>