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>
Related
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?
This is my part of a table (with a number of rows that I don't know before I generate the table) that an external script creates:
<table id='testTable'><thead>
<tr>
<th align="center">Header 1</th>
<th align="center">Header 2</th>
<th align="center">Header 3</th>
<th align="center">Header 4</th>
<th align="center">Header 5</th>
<th align="center">Header 6</th>
<th align="center">Header 7</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">AAAA</td>
<td align="center">Field 1</td>
<td align="center">Field 2</td>
<td align="center">Field 3</td>
<td align="center">Field 4</td>
<td align="center">Field 5</td>
<td align="center">Field 1</td>
</tr>
<tr>
<td align="center">AAAA</td>
<td align="center">Field 1</td>
<td align="center">Field 2</td>
<td align="center">Field 3</td>
<td align="center">Field 4</td>
<td align="center">Field 5</td>
<td align="center">Field 1</td>
</tr>
<tr>
<td align="center">BBBB</td>
<td align="center">Field 1</td>
<td align="center">Field 2</td>
<td align="center">Field 3</td>
<td align="center">Field 4</td>
<td align="center">Field 5</td>
<td align="center">Field 1</td>
</tr>
<tr>
<td align="center">BBBB</td>
<td align="center">Field 1</td>
<td align="center">Field 2</td>
<td align="center">Field 3</td>
<td align="center">Field 4</td>
<td align="center">Field 5</td>
<td align="center">Field 1</td>
</tr>
<tr>
<td align="center">CCCC</td>
<td align="center">Field 1</td>
<td align="center">Field 2</td>
<td align="center">Field 3</td>
<td align="center">Field 4</td>
<td align="center">Field 5</td>
<td align="center">Field 1</td>
</tr>
I would like to change the background colors for alternate rows using 2 colors (grey and white, for example) considering the value of the first as the key. In the data above, it would be something like:
1st row --> white
2nd row --> grey
3rd row --> grey (because the key is still "BBBB")
4th row --> white
I checked another example but I was not able to use it, so it would be great to have step-by-step indications to edit the html or the CSS that I use to style the table (if necessary, I can post the content of the CSS too).
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>
I'm trying to create a table in HTML. 7 rows in the first column, only 1 in the second. I can't figure it out. I feel like I am missing something simple.
You can simply put a second td element in the first row, and change its rowspan to 7
<table border="1" style="width:100%">
<tr>
<td>a</td>
<td rowspan="7">b</td>
</tr>
<tr>
<td>a</td>
</tr>
<tr>
<td>a</td>
</tr>
<tr>
<td>a</td>
</tr>
<tr>
<td>a</td>
</tr>
<tr>
<td>a</td>
</tr>
<tr>
<td>a</td>
</tr>
</table>
You can use the rowspan attribute to have a cell span multiple rows.
Code:
<html>
<body>
<table>
<tr>
<td>Row 1</td>
<td rowspan="7">Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
</tr>
<tr>
<td>Row 5</td>
</tr>
<tr>
<td>Row 6</td>
</tr>
<tr>
<td>Row 7</td>
</tr>
</table>
</body>
</html>
You want to use the rowspan attribute to stretch the second column over the rows of the first column, as shown below.
Reference: http://www.w3.org/TR/html401/struct/tables.html#h-11.2.6.1
td {
border: 1px solid gray;
}
<table>
<tr>
<td>C 1</td>
<td rowspan="7">C 2</td>
</tr>
<tr>
<td>C 1</td>
</tr>
<tr>
<td>C 1</td>
</tr>
<tr>
<td>C 1</td>
</tr>
<tr>
<td>C 1</td>
</tr>
<tr>
<td>C 1</td>
</tr>
<tr>
<td>C 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>