In HTML we can use <tbody> and <thead>.
Which works fine with a 'normal' table.
<table>
<thead>
<tr>
<th>col1</th>
<th>col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1-1</td>
<td>data1-2</td>
</tr>
</tbody>
</table>
However sometimes there is a rotated table:
<table>
<tr>
<th>col1</th>
<td>data1-1</td>
</tr>
<tr>
<th>col2</th>
<td>data1-2</td>
</tr>
</table>
When I use a rotated table I never use <tbody> or <tbody>.
However if I'm correct the <tbody> is mandatory if a <tfoot> is used.
Does a <tr> have to be inside a <tbody>
So my question is:
Is the above statement correct (that it is indeed mandatory if a <tfoot> is used)?
If so where would you add <thead>s and <tbody>s in the second example table?
According to the W3 specification the tbody tag is always mandatory unless your table has only one table body and there is no header and foot sections.
In your case you can use:
<table>
<tbody>
<tr>
<td>col1</td>
<td>data1-1</td>
</tr>
<tr>
<td>col2</td>
<td>data1-2</td>
</tr>
</tbody>
</table>
That is HTML valid. Since you don't have "real" header on top of the table I think no header tag applies here. I'm not sure rotated tables are supported by HTML convention, so you basically have a normal table with only body.
Related
What is the best way - if there is any at all, without using js - to force all td that belong to one col to obtain properties that are specified in the col?
A simple
<col style='text-align:right' />
does not seem to have any impact on the underlying table cells content.
Using css and nth-child(column-index)
table tbody td:nth-child(2){
text-align: right;
}
<table border=1>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Use style="float: right;" in the tag which you want to align the right side.
Does a tag for grouping th or td elements exist?
I need something like this:
<table>
<thead>
<tr>
<th></th>
<th></th>
<GROUP>
<th></th>
<th></th>
</GROUP>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<GROUP>
<td></td>
<td></td>
</GROUP>
</tr>
</tbody>
</table>
No, col and colgroup (which must be inserted before the first element) are not a solution.
Does exists a tag for grouping th or td element?
Yes, it's called colgroup.
Don't want to use a colgroup? Sorry, that's how grouping table columns is done in HTML. Use the tools given to you, or don't.
for grouping cols (or rows ) in a html table you can use colspan (or rowspan) attribute
<table>
<caption>Test Caption </caption>
<tr> <th colspan="2">65</th>
<th colspan="2">40</th>
<th colspan="2">20</th>
</tr>
<tr>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
</tr>
<tr>
<td>82</td>
<td>85</td>
<td>78</td>
<td>82</td>
<td>77</td>
<td>81</td>
</tr>
</table>
(or nested table)
I have following table structure
<table>
<table>
<thead>
<tr>...header template...</tr>
</thead>
</table>
<tbody>
<tr> ... </tr>
<tr> ... </tr>
<tr> ... </tr>
</tbody>
<table>
My problem is that the datarows and header rows are not aligned to each other.
The table structure looks wierd.
Any clue how can i make them aligned.
Edit:
I have used Jqgrid to populate my grid.
The table structure which jqgrid produces is like the above one.
If i dont wrap within tag, then the first inside disappears.
Somewhere i found that jquery.clean will clean up if we dont wrap within table.
do u guys have any idea on this
You have so much syntax errors.
This is normal table:
<table border=1>
<thead>
<tr><th>header template</th></tr>
</thead>
<tbody>
<tr><td>...</td></tr>
<tr><td>...</td></tr>
</tbody>
</table>
A table have head and body and each can have rows and columns:
<table>
<thead>
<tr><td></td></tr>
</thead>
<tbody>
<tr><td></td></tr>
</tbody>
<table>
You can also see following link for more details.
Cheers !!
Try using a syntax like this:
<table>
<thead>
<tr>
<th colspan="2"> ...header template... </th>
</tr>
</thead>
<tbody>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
</tbody>
</table>
I'm trying to open a .xls file which will has all html content.
In the html content, I'm trying to include 2 tables of width 100% (viewport width of the spreadsheet).
If I just include only the 1st table, WIDTH=100% works. But when I include the 2nd table, both the tables width seems to be auto and not as wide as it works with just 1 table.
Following is the contents of the .xls file :
<HTML>
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="application/vnd.ms-excel; charset=UTF-8">
<TITLE>Open in Excel as well as browser (this is ignored by Excel)</TITLE>
</HEAD>
<BODY>
<H2>Useful HTML tags understood by Excel</H2>
<BLOCKQUOTE>The list given below is not an exhastive list of all tags understood by Excel.
Where there are several codes that achieve the same effect, I
have only included one of them.</BLOCKQUOTE>
<TABLE BORDER=YES WIDTH=100%>
<TR>
<TH WIDTH=20%><B>Tag</B></TD>
<TH WIDTH=30%><B>Valid Attributes</B></TD>
<TH WIDTH=50%><B>Excel interpretation</B></TD>
</TR>
<TR>
<TD>TD</TD>
<TD>BGCOLOR=colour</TD>
<TD BGCOLOR=YELLOW>Background colour for the cell</TD>
</TR>
<TR>
<TD>B</TD>
<TD ALIGN=CENTER>-</TD>
<TD><B>Bold</B></TD>
</TR>
<TR>
<TD>TD, TH</TD>
<TD>ROWFIELD</TD>
<TD>Pivot table: Type of pivot table</TD>
</TR>
</TABLE>
<BR/><BR/><BR/>
<TABLE BORDER=YES WIDTH=100%>
<TR>
<TH WIDTH=20%><B>Tag</B></TD>
<TH WIDTH=30%><B>Valid Attributes</B></TD>
<TH WIDTH=50%><B>Excel interpretation</B></TD>
</TR>
<TR>
<TD>TABLE</TD>
<TD>ALIGN=LEFT|RIGHT|CENTER|JUSTIFY</TD>
<TD>Table and its placement</TD>
</TR>
<TR>
<TD>TABLE</TD>
<TD>WIDTH=nn</TD>
<TD>Size of entire table</TD>
</TR>
<TR>
<TD>TABLE</TD>
<TD>CROSSTABGRAND=NONE|ROW|COLUMN|ROWCOLUMN</TD>
<TD>Pivot table: where grand totals to be placed</TD>
</TR>
<TR>
<TD>TD, TH</TD>
<TD>ROWFIELD</TD>
<TD>Pivot table: Type of pivot table</TD>
</TR>
</TABLE>
</BODY>
</HTML>
To be clear, my requirement is I need to render 2 html tables, both of width 100%.
Please comment if you have any queries.
Put them them into a main table.
<TABLE WIDTH=100%><TR><TD>
<TABLE.......
</TD></TR>
<TR><TD>
<TABLE......
</TD></TR></TABLE>
I need to have a table where each row can have a child table or other content below that row.
Is there any valid way to do this?
Add another <tr> after the current one with a colspan which spans all columns and then put another <td> with a <table> therein.
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
<tr>
<td colspan="3">
<table>...</table>
</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
The new table will then appear between the rows.
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
problem?
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
You can't put anything inside a table between the rows, all content has to be inside the table cells.
You can add another row, and use colspan to make it contain a single cell that spans the width of the table, and put the content in that cell.
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</table>
There is no valid way. Only td-s and th-s are allowed in tr
You can however put only 1 td in the row, and set it's colspan attribute to the number of columns you have in the table.