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>
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?
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>
I think this question is easy... I want this HTML code of a table:
<table>
<tr>
<th>Heading 1</th>
<td>or</td>
<th>Heading 2</th>
</tr>
<tr>
<td>Data 1 of Row 2</td>
<td>Data 2 of Row 2</td>
</tr>
<tr>
<td>Data 1 of Row 3</td>
<td>Data 2 of Row 3</td>
</tr>
</table>
To produce an output as:
AND NOT as:
In other words, I want to show it as:
<table>
<tr>
<th>Heading 1</th>
<td>or</td>
<th>Heading 2</th>
</tr>
<tr>
<td>Data 1 of Row 2</td>
<td></td>
<td>Data 2 of Row 2</td>
</tr>
<tr>
<td>Data 1 of Row 3</td>
<td></td>
<td>Data 2 of Row 3</td>
</tr>
</table>
Even there's no empty <td> elements on my code.. I really didn't want to write a <td> element in a table when it has an empty content.. What attribute (with value) should I use? Should it be style attribute? (I hope it's not!) Is this possible?
Is the word "or" really important content, or just decoration? Looks kind of odd to me. Here's a cheeky alternative:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
th {position: relative;}
th:first-child:after {
content: "or";
position: relative;
right: -1em;
top: 0;
}
</style>
</head>
<body>
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Data 1 of Row 2</td>
<td>Data 2 of Row 2</td>
</tr>
<tr>
<td>Data 1 of Row 3</td>
<td>Data 2 of Row 3</td>
</tr>
</table>
</body>
</html>
warning Not tested in IE.
I told 'ya, IT'S EASY..
After just using the so called opposite attribute of colspan, named (attribute) rowspan and searching a little bit, and using the alternative supported CSS for unsupported valign attribute in HTML5, this is what I've found:
<table>
<tr>
<th>Heading 1</th>
<td rowspan="3" style="vertical-align: text-top;">or</td>
<th>Heading 2</th>
</tr>
<tr>
<td>Data 1 of Row 2</td>
<td>Data 2 of Row 2</td>
</tr>
<tr>
<td>Data 1 of Row 3</td>
<td>Data 2 of Row 3</td>
</tr>
</table>
Test it on any HTML(5) interpreter and see that the output of this HTML code is looks like as:
Even without empty <td> elements in the table. BUT STILL, I wondered if someone knew how to markup a table with the construction like this:
_________________
|_____|_____|_____|
|_____| |_____|
|_____| |_____|
WITHOUT ANY TRICK.. “I think it's quite impossible with HTML alone.”
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>