You already know how to think of it making table. Of course, you already understand the table, tr, td, and th tags, and even still in your pocket loaded rowspan and colspan. You can really making a pretty little brown plywood tables (table), but do not you want to do an elegant stable, glass above, banquet tables enough to withstand an elephant's (table)?
Column Counter Strike
Table row just to make table columns look foolish. The same work, the table is constructed from row to row, so that the column was very depressed.
But very lucky, colgroup col and row labels to save a enthusiastic.
This label allows you to define two table columns and you need to make the style of them, particularly useful for you need to line up column differently colored or without them, you need the style of each individual cell.
This is an example of using these tags:
<table>
<colgroup> <col /> <col class="alternate" /> <col /> </colgroup>
<tr>
<td>This</td>
<td>That</td>
<td>The other</td>
</tr>
<tr>
<td>Ladybird</td>
<td>Locust</td>
<td>Lunch</td>
</tr>
</table>
alternate class style will be applied to the second column, or the second cell in each row.
Of course you can use the span attribute on colgroup or col, with rowspan and colspan have similar purposes
Use colgroup together may define columns and rows that belong to the group, such as <colgroup span = "2"> </ colgroup> composition will be the first two columns. When span in colgroup, should no longer use col tags.
Col where the span is more sensible to use, can be, for example, in the above example application like this:
<table>
<colgroup> <col /> <col span="2" class="alternate" /> </colgroup>
...
This will alternate type of application to the last two.
note
Oh, but there may be a trap, is not it? That is: you can only styled column is a border, background, width and visibility.
Internet Explorer in this regard seems to perform better than other browsers because it is loaded with beautiful CSS attributes such as color, but, as the result of the same, because it is just crazy odd behavior. This strange anomaly allows Ian Hixie to explain. Create a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.
Summary and description episode
A brief and easy to think of improving ease of use is always a spreadsheet application summary and description.
Abstract may be applied to the table by the start tag summary table attribute table. This will not be displayed, but can assist non-visual form of expression.
caption label definition described directly after the start tag table. It appears directly on top of the table by default, but may be disposed top, right, bottom left or the value in the CSS property caption-side, although not care IE.
<table summary="The mating habits of locust, showing how many use protection and how many have a cigarette afterwards">
<caption>Locust mating habits</caption>
...
Explore the header, table, and note the rolling table
thead, tfoot and tbody allow you to form into the header, table, and note forms the main body. Especially useful for large tables, at the time of printing, headers and Notes should appear on every page.
These elements must be defined in order thead-tfoot-tbody, like this:
<table>
<thead>
<tr>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
...
</tbody>
</table>
You can make the main table tbody scroll in Gecko-based browsers (Mozilla, Firefox and Netscape 6+, etc.), by applying overflow: auto; max-height: [whatever] style. Then you can see the header and note fixed, and the right of the main table scroll bar. You should be careful using the max-height property because IE does not know, relatively safe practice is to use the height property, IE will it apply to every row.
Note: To tell the difference back to the browser, IE currently still no clue encountered header and note, although still as a form to deal with, but does not appear when printed headers and every page oh Note only alone pass rolling form.
note
Caution scroll form. Although they provide a very useful purpose, and that most users are not used to their linear data is unique.
