HTML table with nested td - 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>

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>

Why is colspan and rowspan not formatting correctly in this table?

I have pasted my code below as well as a picture of what I am trying to accomplish. "Header 2" should span 3 columns instead of 2 and "DataA1",B1,C1 should span 2 columns instead of 1. But when I specify that in my code it doesn't do anything. I am not sure what error I have run into.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td
{
border: 1px solid black;
border-collapse: collapse;
}
.title
{
padding: 10px;
}
</style>
</head>
<body>
<h1>Table</h1>
<table>
<tr>
<th colspan="4" class="title">A common header for three subheads</th>
<th rowspan="2">Header 3</th>
</tr>
<tr>
<th>Header 1</th>
<th colspan="3">Header 2</th>
</tr>
<tr>
<th>Thing A</th>
<td colspan="2">dataA1</td>
<td>dataA2</td>
<td>dataA3</td>
</tr>
<tr>
<th>Thing B</th>
<td colspan="2">dataB1</td>
<td>dataB2</td>
<td>dataC3</td>
</tr>
<tr>
<th>Thing C</th>
<td colspan="2">dataC1</td>
<td>dataC2</td>
<td>dataC3</td>
</tr>
</table>
</body>
</html>

"data A1" and the two cells below it do span two columns, and "Header2 " does span three columns, but there is no row where you would see this additional divison between column two and three. If you add a row with five cells you see what I mean (I only added that last row, I didn't change your code otherwise):
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
.title {
padding: 10px;
}
<h1>Table</h1>
<table>
<tr>
<th colspan="4" class="title">A common header for three subheads</th>
<th rowspan="2">Header 3</th>
</tr>
<tr>
<th>Header 1</th>
<th colspan="3">Header 2</th>
</tr>
<tr>
<th>Thing A</th>
<td colspan="2">dataA1</td>
<td>dataA2</td>
<td>dataA3</td>
</tr>
<tr>
<th>Thing B</th>
<td colspan="2">dataB1</td>
<td>dataB2</td>
<td>dataC3</td>
</tr>
<tr>
<th>Thing C</th>
<td colspan="2">dataC1</td>
<td>dataC2</td>
<td>dataC3</td>
</tr>
<tr>
<th>Thing D</th>
<td>dataD1a</td>
<td>dataD2</td>
<td>dataD3</td>
<td>dataC4</td>
</tr>
</table>

You need to add a final row that actually contains five cells for the behaviour of colspan="2" to be visible.
Then add a width to th and td to maintain the correct styles, and you can hide the empty row to match your design.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.title {
padding: 10px;
}
th, td {
width: 20%;
}
<h1>Table</h1>
<table>
<tr>
<th colspan="4" class="title">A common header for three subheads</th>
<th rowspan="2">Header 3</th>
</tr>
<tr>
<th>Header 1</th>
<th colspan="3">Header 2</th>
</tr>
<tr>
<th>Thing A</th>
<td colspan="2">dataA1</td>
<td>dataA2</td>
<td>dataA3</td>
</tr>
<tr>
<th>Thing B</th>
<td colspan="2">dataB1</td>
<td>dataB2</td>
<td>dataC3</td>
</tr>
<tr>
<th>Thing C</th>
<td colspan="2">dataC1</td>
<td>dataC2</td>
<td>dataC3</td>
</tr>
<tr style="visibility: hidden;" aria-hidden="true">
<th></th><td></td><td></td><td></td><td></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: how to use colspan and rowspan?

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 do I arrange content in thead

I wan to arrange columns in my thead to look like the below image
This my code
<thead>
<tr>
<td style="text-align: center;">SUBJECT</td>
<td style="text-align: center;" colspan="3">CA<br> T1 T2 T3</td>
<td style="text-align: center;">CA TOTAL (40)</td>
<td style="text-align: center;">SIGN</td>
</tr>
</thead>
But it displays like this, how can I split the 'CA' column

You need take 2 rows for thead for display.
Here is the complete code
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<thead>
<tr>
<td style="text-align: center;" rowspan='2'>SUBJECT</td>
<td style="text-align: center;" colspan="3">CA</td>
<td style="text-align: center;" rowspan='2'>CA TOTAL (40)</td>
<td style="text-align: center;" rowspan='2'>SIGN</td>
</tr>
<tr>
<td style="text-align: center;">T1</td>
<td style="text-align: center;">T2</td>
<td style="text-align: center;">T3</td>
</tr>
</thead>
</table>
</body>
</html>

You can't split a cell into more cells, you can only merge existing cells together. That said, if you want to have five columns you need to create five columns, and rather than using a <br> to force content to a new line in one cell, and then fake separate cells, use two rows of cells. This, of course, requires the appropriate use of the colspan and rowspan attributes, such as the following:
table {
border-collapse: collapse;
}
th,
td {
text-align: center;
border: 1px solid #000;
min-width: 4em;
min-height: 2em;
padding: 0.2em 0.5em;
}
th {
vertical-align: top;
}
<table>
<thead>
<tr>
<!-- rowspan="2" forces the following <th> element
to span two rows in its containing element: -->
<th rowspan="2">SUBJECT</th>
<th colspan="3">CA</th>
<!-- as it does here also: -->
<th rowspan="2">CA TOTAL (40)</th>
</tr>
<tr>
<!-- this <tr> contains only three <th> elements,
unlike the previous <tr> which contains five,
because two <th> elements of the previous row
will occupy space in this <tr> also -->
<th>T1</th>
<th>T2</th>
<th>T3</th>
</tr>
</thead>
<tbody>
<tr>
<td>English Language</td>
<td>3</td>
<td>6</td>
<td>10</td>
<td></td>
</tr>
<tr>
<td>Mathematics</td>
<td>3</td>
<td>5</td>
<td>7</td>
<td></td>
</tr>
</tbody>
</table>
JS Fiddle demo.
Incidentally, where possible try to style your content via the use of stylesheets; this makes it far easier to update your style and presentation in future.

<thead>
<tr>
<td style="text-align: center;" rowspan='2'>SUBJECT</td>
<td style="text-align: center;" colspan="3">CA</td>
<td style="text-align: center;" rowspan='2'>CA TOTAL (40)</td>
<td style="text-align: center;" rowspan='2'>SIGN</td>
</tr>
<tr>
<td style="text-align: center;">T1</td>
<td style="text-align: center;">T2</td>
<td style="text-align: center;">T3</td>
</tr>
</thead>

Use rowspan and 2 trs
th { vertical-align: top; border: 1px solid black;}
<table>
<thead>
<tr>
<th rowspan="2" style="text-align: center;">SUBJECT</th>
<th style="text-align: center;" colspan="3">CA</th>
<th rowspan="2" style="text-align: center;">CA TOTAL (40)</th>
</tr>
<tr>
<th>T1</th>
<th>T2</th>
<th>T3</th>
</tr>
</thead>
</table>

You can use this. Working perfectly:
<style>
table, th, td{
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
border: 1px solid #000;
}
</style>
<table>
<thead>
<tr>
<th rowspan="2" >SUBJECT</th>
<th colspan="3">CA</th>
<th rowspan="2">CA TOTAL (40)</th>
<th rowspan="2">SIGN</th>
</tr>
<tr>
<th>T1</th>
<th>T2</th>
<th>T3</th>
</tr>
</thead>
<tbody>
<tr>
<td>English Language</td>
<td>3</td>
<td>6</td>
<td>10</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Mathematics</td>
<td>3</td>
<td>5</td>
<td>7</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>