Beginners Beginners: Like the Web page application form, please come in!

Beginners | Web page

Do you think you already know how to make a table? Of course, you already know the table, TR, TD, and th tags, and even put rowspan and colspan in your pocket. You can make a beautifully compact brown plywood table (form), but don't you want to be an elegant, solid, glass-like banquet table (form) that bears a big elephant?

List of counter strikes

A table row simply makes the table column look stupid. The same work, the table is built by rows and rows, making columns very frustrating.

But luckily, Colgroup and col tags came to save the enthusiastic column.

These two tags allow you to define table columns and style them as you want, for you to make rows or shades of color especially useful, and if you don't have them, you need to style 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>

The style of the alternate class will be applied to the second column, or the second cell of each row.

You can, of course, use span properties on Colgroup or col, similar to rowspan and colspan.

Colgroup can be used together to define the number of rows that belong to a column group, such as <colgroup span= "2" ></colgroup> the first two columns. When you use span in Colgroup, you should not use the Col label again.

It would be wiser to use span in col, for example, in the example above:

<table>
<colgroup> <col/> <col span= "2" class= "alternate"/> </colgroup>
...

This will apply the alternate class to the last two columns.

Attention

Oh, but there's probably a trap, isn't it? That is, you can only style the columns with borders, backgrounds, widths, and visibility.

Internet Explorer looks better in this area than other browsers because it loads beautiful CSS properties like color, but, as it turns out, it's because it's crazy and bizarre. This peculiar anomaly could have been explained by Ian Hixie.

Summary and Description episode

A brief and easy to improve usability thinking is that always apply a summary and description for the table.

The summary can be applied to the table using the Summary property in the table's Start tab table. This does not appear, but can assist in non-visual table performance.

The caption label defines the description directly after the start tag table. It appears by default directly at the top of the table, but it can be set in the CSS property caption-side, right, bottom, or left values, although IE doesn't care.

<table summary= "The Mating habits of locust, showing how many use protection and how many have a cigarette afterwards" & Gt
<caption>locust mating habits</caption>
...

Discussion on table header, table note and scrolling table

THEAD, TFOOT, and tbody allow you to divide tables into headers, tables, and table bodies. This is especially useful for large tables, where headers and notes should appear on every page when printing.

These elements must be defined in the order of 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 have the form body tbody in gecko browsers (Mozilla, Firefox, Netscape 6+, etc.), through the application of Overflow:auto; Max-height: The style of [whatever]. Then you can see that the header and the table are fixed, and the table has a scroll bar to the right of the body. You should use the Max-height property carefully because IE does not know, it is safer to use the Height property, ie will apply it to each row.

Note: Back to the browser differences, the current IE encountered the table header and note when there is no clue, although still as a form to deal with, but the printing time will not be in the Oh every page appears header and table note, only lonely to pass the scrolling table.

Attention

Treat scrolling tables with caution. Although they provide very useful purposes, most users are not accustomed to them and think that linear data is unique.