CSS3: The 11th chapter

Formatting tables and Forms

1. The various tabs of the table provide a number of useful "hooks" that can be hung on top of the CSS style. If you create a <th> label style, the title--<th> label for each column--it might look different from other table cells, or you can easily set the width for a table cell column by using the <colgroup> tag.

2.padding refers to the space between the border of an element and its contents. You can use padding to add a little space between the text of a paragraph and its border. For a table, a border is the edge of a table cell, so padding adds space around the contents of the table cell. It also has the benefit of controlling the space between the contents of the unit and its edges, respectively. If you want to add 10px of space to all the table cells, you can use this style

TD, Th {padding:10px;}

You can also control the interval for each edge separately. Suppose you want to add 1-px space at the top of each table data cell, add 3px at the bottom, add 5px on the left and right sides, and you can create this style:

TD {

padding-top::10px;

padding-right:5px;

padding-bottom:3px;

padding-left:5px;

}

Or take advantage of padding shortcut properties like this:

TD {

padding:10px 5px 3px 5px;

3. To control the position of content within a table cell, take advantage of the Text-align and Vertical-align properties.

The Text-align controls horizontal orientation and can be set to left, right, center, and justify. This is a property that can be inherited. If you want to align the contents of all table cells to the right, you can create a style like this:

Table {text-align:right;}

This property is useful for <th> tags, because browsers usually have them aligned in the center. Such a simple style as th {text-align:left;} allows the table headings to be aligned with the table cells.

The border (border) property in 4.CSS is very similar to the table (table) of other elements, but the following points need to be kept in mind: first, when you set border in the Format <table> label style, it only adds a border to the table, Instead of adding borders to any table cells. Second, when the table cell is set to border (TD {BORDER:LPX solid black;}), a visible gap is left between the table cells.

5. Control the spaces between table cells. Unless otherwise instructed, the browser separates the table cells by a few pixels. When you apply a border to a table cell, it's actually easy to see the gap. CSS provides the Border-spacing property to control this gap. Apply this property to the table itself, and if you want to remove the portion of space that the browser typically displays between cells, you can set the value of border-spacing to 0:

Table {

border-spacing:0;

}

If you prefer a space between cells, you can also add spaces:

Table {

border-spacing;2px;

}

Clear the bilateral box. The collapse option eliminates cell spacing and bilateral boxes. This is done by setting the collapse value in the style of the formatted table, like this:

Table {border-collapse:collapse;}

Rounded corners. Use the Border-radius property to add rounded corners to table cells. For example, if you want to frame table cells and give them rounded corners, you can create a style like this:

TD {

BORDER:LPX solid black;

border-radius:5px;

Note that if you set the Border-collapse property value to collapse, the browser ignores all Border-radius set for the table cell, and they will just draw a normal square corner.

6. The following are some common form labels, along with their associated property types.

FieldSet. <fieldset> tags are used to centralize related form issues.

Legend <legend> tag right after the <fieldset> tag's HTML code, it provides a label for a set of fields.

Text fields. <input type= "Text" >, <input type= "password" > and <textarea> tags all create text boxes in the form.

Buttons (button). form buttons, such as <input type= "Submit", allow visitors to submit forms, refill content, or trigger some other action.

Drop-down Menus (drop-down menu). For a drop-down menu created by the <select> tag, you can also define a style to some extent.

CheckBox (check box) and radio button (radio buttons). Most browsers do not allow formatting on these elements. But opera allows you to set a background color in a check box or button.

7. Define a style for a table

(1) Open the file 11→table→table.html on the Web browser.

(2) Open table.html in a text editor.

(3) Click between the starting and closing <style> tags and add the following styles:

. Inventory {

font-family: "Trebuchet Ms", Arial, Helvetica, Sans-serif;

width:100%;

(4) Add another style below the table style you just created:

. Inventory Caption {

Text-align:right;

Font-size:l. 3em;

margin-bottm:10px;

}

(5) Add the following style groups to the internal style sheet:

. inventory TD,. Inventory TH {

Font-size:1. 1em;

border:1px solid #DDB575;

(6) Add the Border-collapse property to the table style created in step 3rd, like this:

. Inventory {

font-family: "Trebuchet Ms", Arial, Helvetica, Sans-serif;

width:100%;

margin-top:25px

Border-collapse:collapse;

(7) Add padding to the group selector created in step 5th:

. inventory TD,. Inventory TH {

Font-size:l. Lem

BORDER:LPX solid #DDB575;

padding:3px 7px 2px 7px;

}

(8) In the Format table header unit, add a new style below the. Inventory TD,. Inventory TH style:

. inventory th {

Text-transform:uppercase;

Text-align:left;

padding-top:5px;

padding-bottom:4px;

(9) Add a linear gradient to the background in th style and modify the color of the text:

. inventory th {

Text-transform:uppercase;

Text-align:left;

padding-top:5px;

padding-bottom:4px;

Background:rgb (229,76,16),

Background:-webkit-linear-gradient (RGB (229,76,16),

RGB (173,54,8));

Background:-moz-linear-gradient (RGB (229,76,16),

RGB (173,54,8));

Background:-o-linear-gradient (RGB (229,76,16),

RGB (173,54,8));

Background:linear-gradient (RGB (229,76,16), RGB (173,54,8));

Color:white;

}

(10) Add a style to the internal style sheet of the Web page:

. Inventory Tr:nth-of-type (even) {

Backround-color:rgba (255,255,255,. L);

}

. Inventory Tr:nth-of-type (odd) {

Background-color:rgba (229,76,16,. L);

}

(11) The internal style of the Web page:

#price, #rating {

width:15%;

}

CSS3: The 11th chapter