I want to creat a table with several titles to highlight different areas.
Basically, the structure needs to look like that:
<table border="1">
<tr>
<td>Title 1</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 3</td>
<td>Col 4</td>
</tr>
<tr>
<td>Title 2</td>
</tr>
<tr>
<td>Col 5</td>
<td>Col 6</td>
</tr>
<tr>
<td>Col 7</td>
<td>Col 8</td>
</tr>
<tr>
<td>Col 8</td>
<td>Col 10</td>
</tr>
</table>
But I'm not sure, whether it's valid code.
Is there a proper tag for the title?
Here is a FIDDLE.
You should use <th> tag for the title.
UPD By the way, you can check whether the code is valid or not by using this validator
A proper way would be like this, using th with a colspan of 2 to span the 2 columns.
<table border="1">
<tr>
<th colspan="2">Title 1</th>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 3</td>
<td>Col 4</td>
</tr>
<tr>
<th colspan="2">Title 2</th>
</tr>
<tr>
<td>Col 5</td>
<td>Col 6</td>
</tr>
<tr>
<td>Col 7</td>
<td>Col 8</td>
</tr>
<tr>
<td>Col 8</td>
<td>Col 10</td>
</tr>
</table>
Try it
<table border="1">
<tr>
<th colspan="2">Title 1</th>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 3</td>
<td>Col 4</td>
</tr>
<tr>
<th colspan="2">Title 2</th>
</tr>
<tr>
<td>Col 5</td>
<td>Col 6</td>
</tr>
<tr>
<td>Col 7</td>
<td>Col 8</td>
</tr>
<tr>
<td>Col 8</td>
<td>Col 10</td>
</tr>
</table>
Related
I want my html table to have 3 headers in which the second and third headers should be divided as I have depicted below. I tried with colspan but not able to create it. Need help.
/--------------------------------------------------------------------------------------\
| | Two | Three |
| One |------------|-----------------------------------------------------------|
| | Two A | Three A | Three B | Three C | Three |
|-------------|------------------------------------------------------------------------|
|One A | One B| Col 1|Col 2| Col 1 | Col 2| Col 1 | Col 2| Col 1 | Col 2| Col 1 | Col 2|
|--------------------------------------------------------------------------------------|
\--------------------------------------------------------------------------------------/
You can try this :
body{
margin:10px;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding:5px;
}
<table style="width:100%">
<tr>
<th rowspan="2" colspan="2">One</th>
<th colspan="2">two</th>
<th colspan="8">Three</th>
</tr>
<tr>
<td colspan="2">Two A</td>
<td colspan="2">Three A</td>
<td colspan="2">Three B</td>
<td colspan="2">Three C</td>
<td colspan="2">Three D</td>
</tr>
<tr>
<td>One A</td>
<td>One B</td>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td colspan="12"></td>
</tr>
</table>
To have the same format use the following:
<table border="1">
<tr>
<td rowspan="2" colspan="2">One</td>
<td colspan="2">Two</td>
<td colspan="8">Three</td>
</tr>
<tr>
<td colspan="2">Two A</td>
<td colspan="2">Three A</td>
<td colspan="2">Three B</td>
<td colspan="2">Three C</td>
<td colspan="2">Three</td>
</tr>
<tr>
<td>One A</td>
<td>One B</td>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 1</td>
<td>Col 2</td>
</tr>
</table>
You need to use colspan and rowspan to get the result.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2" rowspan="2">One</th>
<th colspan="2">Two </th>
<th colspan="10">Three </th>
</tr>
<tr>
<th colspan="2">Two A</th>
<th colspan="2">Three A</th>
<th colspan="2">Three B</th>
<th colspan="2">Three C</th>
<th colspan="2">Three D</th>
</tr>
<tr>
<td>One A</td>
<td>One B</td>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 1 </td>
<td>Col 2</td>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 1</td>
<td>Col2</td>
<td> Col 1</td>
<td> Col 2</td>
</tr>
<tr>
<td>One A</td>
<td>One B</td>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 1 </td>
<td>Col 2</td>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 1</td>
<td>Col2</td>
<td> Col 1</td>
<td> Col 2</td>
</tr>
</table>
</body>
</html>
</body>
</html>
I have a HTML question:
If I have a table with multiple thead, on printing this page, the repetition on top of next page is first thead and not the last one.
Example:
<table>
<thead>
<tr>
<th>TH 1</th>
<th>TH 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
</tbody>
<thead>
<tr>
<th>TH 3</th>
<th>TH 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
</tbody>
The second-page header shows TH1 and TH2 instead of TH3 and TH4 during print preview.
Is there a way to print TH3 and TH4?
I'm trying to make a table header fixed, and be able to scroll the contents of the table.
I'm able to do it through researching on how to make <th> fixed, but I have a problem.
Making <th> fixed requires at least 2 tables. I have 12 columns so it is hard to align the 2nd table with the 1st table.
1st table = contain <th> fixed
2nd table = contents
Any idea how to make the two tables align? Is there any way to make <th> fixed by only making use of one table?
<table style="width: 100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td></td>
<td>Steps</td>
<td>Activities</td>
<td>Details</td>
<td>Responsibilities</td>
<td>Mandatory <br> Deliverables </td>
<td>Custom <br> Build</td>
<td>Packaged <br> Solution</td>
<td>Consulting <br> Services</td>
<td>Infrastructure <br> Projects </td>
<td>POC</td>
<td>Maintenance</td>
</tr>
</table>
<div style="overflow: auto;height: 100px; width: 101.3%">
<table style="width: 100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</table>
</div>
There's a good in-depth answer by Hashem Qolami in this thread:
HTML table with 100% width, with vertical scroll inside tbody
I don't advise using two tables. Better to use one table, put the header in between
<thead>
<tr>
<th>Steps</th>
...
</tr>
</thead>
and the content of the table in between
<tbody>...</tbody>
and use some css as Hashem showed.
you can see on : http://jsfiddle.net/hashem/crspu/555/
you can easy to used below code :
<table style="width: 100%;display:block;">
<thead style=" display: inline-block;width: 100%;height: 20px;">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody style="height:200px;display:inline-block;width:100%;overflow:auto;">
<tr>
<td>January</td>
<td>$100</td>
</tr>
........
<tr>
<td>January</td>
<td>$100</td>
</tr>
</tbody>
<tfoot style="display: inline-block;width: 100%;height: 20px;">
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
I've got this table, and in this table are 4 columns, like this:
Column1|Column2|Column3|Column4|
data 1 data 2 data 3 data 4
But how do I get it like this?
Column1| data 1
Column2| data 2
Column3| data 3
Column4| data 4
This is my code:
<table>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
</table>
Any ideas? Is it even possible?
Like this:
<table>
<tr>
<th>Column1</th>
<td>Data 1</td>
</tr>
<tr>
<th>Column2</th>
<td>Data 2</td>
</tr>
<tr>
<th>Column3</th>
<td>Data 3</td>
</tr>
<tr>
<th>Column4</th>
<td>Data 4</td>
</tr>
</table>
You put the th in the table rows
<table>
<tbody>
<tr>
<th>Column 1</th>
<td>Data 1</td>
</tr>
<tr>
<th>Column 2</th>
<td>Data 2</td>
</tr>
</tbody>
</table>
<table>
<tr>
<th>Column 1</th>
<td>Data 1</td>
</tr>
<tr>
<th>Column 2</th>
<td>Data 2</td>
</tr>
<tr>
<th>Column 3</th>
<td>Data 3</td>
</tr>
<tr>
<th>Column 4</th>
<td>Data 4</td>
</tr>
</table>
Maybe scope attribute can help you?
<table>
<tr scope="row">
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
</table>
Also here, you get another solution by CSS.
you can use below pattern But i'll suggest you to use css tables : Page layout, Divs instead of Tables
<table>
<tr>
<th>Column1</th><td>data 1</td>
</tr>
<tr>
<th>Column1</th><td>data 1</td>
</tr>
<tr>
<th>Column1</th><td>data 1</td>
</tr>
<tr>
<th>Column1</th><td>data 1</td>
</tr>
</table>
how to align the second column of data cells evenly when first column contains data and empty cells in a html table?
For example, how to align the following data below into a html table.
Column1 Column2
===================
data 1 data 2
data 3
data 4
data 5
blank line
data 1 data 2
data 3
data 4
data 5`
Like so? Demo: http://jsfiddle.net/a2ckX/
<table cellpadding="5" cellspacing="0">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td style="vertical-align: top">data 1</td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
</tr>
<tr>
<td>Data 5</td>
</tr>
<tr>
<td>Data 6</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">Spacer</td>
</tr>
<tr>
<td style="vertical-align: top">data 1</td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
</tr>
<tr>
<td>Data 5</td>
</tr>
<tr>
<td>Data 6</td>
</tr>
</table>
</td>
</tr>
</table>