is it necessary to have table has 3 other tag The benefits are semantics. The You want to use what describes your data best. According to the HTML DTD this is the content model for HTML tables: So this is illegal syntax: It should be: Edit: As to why to use As an example of (5) you might do this: The with: which again excludes the Lastly, many of these same arguments apply to using The answer is if you are using tables to display tabular data. Tabular data are organized into rows and columns for a reason. The meaning of the datum in a table cell is defined by the meaning of the column and the row in which it appears. It is important to identify those cells that give meaning to the rows and columns rather separately from the cells that just contain data. For example, the following table conveys absolutely no meaningful information: The numbers only have meaning if the rows and columns are given names. Those names are marked up using Of course, we still do not know what those numbers mean which is why Finally, it is important to note details such as the units of measurement, data sources etc. That kind of information usually goes in the footer of the table: The title of the table goes into <caption>. The <thead> and <tfoot> sections are especially useful when a table grows large. See How to deal with page breaks when printing a large HTML table for an example. You can use <colgroups> to group together logically related data. Use No, it is not necessary to have th. But it doesn't look like you're using th right. Generally, you have one for each column. A simple example of th used correctly is: You could also do: in any table? even if table has no heading?
<th>
means T able H eader. Use it to markup the headers of your columns. Generally within a <thead>
.<caption>
will describe the whole table. th
will create a single cell which is usually used to describe one column (but can also be used for row headings).thead
, tfoot
, and tbody
. all can be used and are all optional provided that they are in that order, if used, and you have only one thead
and one tfoot
(but you can have multiple tbody
. Many browsers (all?) will add them implicitly if you don't, but the spec says they're optional.th
can appear inside any tr
regardless of where the tr
is.
<!ELEMENT TABLE - -
(CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
<!ELEMENT CAPTION - - (%inline;)* -- table caption -->
<!ELEMENT THEAD - O (TR)+ -- table header -->
<!ELEMENT TFOOT - O (TR)+ -- table footer -->
<!ELEMENT TBODY O O (TR)+ -- table body -->
<!ELEMENT COLGROUP - O (COL)* -- table column group -->
<!ELEMENT COL - O EMPTY -- table column -->
<!ELEMENT TR - O (TH|TD)+ -- table row -->
<!ELEMENT (TH|TD) - O (%flow;)* -- table header cell, table data cell-->
<thead><th>Heading of table</th></thead>
<thead><tr><th>Heading of table</th></tr></thead>
<th>
elements aren't required anywhere. They're simply one of the two cell types (the other being <td>
) that you can use in a table row. A <thead>
is an optional table section that can contain one or more rows.<thead>
there are several reasons:
<thead>
contents at the top of each page so people can understand what the columns meaning without flicking back several pages;<tbody>
elements, <thead>
elements, both or some other combination. It gives you something else to write a selector against;$("table > tbody > tr:nth-child(odd)").addClass("odd");
<thead>
element means those rows won't be styled that way. Or you might do:$("table > tbody > tr").hover(function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});
tr.hover { background: yellow; }
<thead>
rows.<th>
elements over <td>
elements: you're indicating that this cell isn't data but a header of some kind. Often such cells will be grouped together in one or more rows in the <thead>
section or be the first cell in each row depending on the structure and nature of your table.YES!
34 56 90 15
45 65 85 30
50 55 70 35
<th>
:
Feb May Aug Nov
ITH
JFK
IST
<caption>
is needed:Average Temperatures by Month at Selected Airports
Feb May Aug Nov
ITH
JFK
IST
Average Temperatures by Month at Selected Airports
Feb May Aug Nov
ITH
JFK
IST
Temperatures in °F. Source: Publication #456 MNMO
<th>
s if you are displaying tabular data - use one for each column. It is nice for your regular users and essential for screen readers. Do not use <th>
s if you are using the table for layout purposes (or other nefarious schemes...)<table>
<tr><th>Breed</th><th>Name</th></tr>
<tr><td>Pekingese</td><td>Pluto</td></tr>
<tr><td>Lab</td><td>Buddy</td></tr>
</table>
<table>
<thead><tr><th>Breed</th><th>Name</th></tr></thead>
<tr><td>Pekingese</td><td>Pluto</td></tr>
<tr><td>Lab</td><td>Buddy</td></tr>
</table>