Teaching of HTML and CSS-Chapter 10 apply CSS styles to tables and forms

 

Chapter 10 apply CSS styles to tables and forms
Key points of this Chapter
How to Use CSS styles to create beautiful data tables
CSS style application in Forms
Directory:
10.1 construct beautiful data tables using CSS styles
10.2 apply CSS styles to Forms

10.1 construct beautiful data tables using CSS styles
1. Table tag
(1) related tags
Including:
<Table>, <TD>, <caption>, <thead>, <tbody>, <tfood>, <Col>, and <colgroup>.
(2) common attributes in tables
Including:
Border width, border color, border style, border attributes, padding, width, height, border sharing, etc.

2. Apply the style to the table
Including the following settings:
(1) Table and cell width
(2) text alignment
(3) Border
(4) margin settings
(5) background settings
(6) Handling of titles and headers
(8) Title placement
(9) alternate colors of table rows
(10) incomplete table
(11) Internal tables
(12) set by Column
(13) Dynamic mouse Effect

10.2 apply CSS styles to Forms
1. Form tag
Including:
<Form>, <input>, <fieldset>, <legend>, and <label>.
2. form layout
Including the following settings:
(1) format alignment
(2) The tag and input box are displayed in two rows.
(3) add sorting

3. Modify the form
After layout a form, you must set the font, color, margin, and other appearances of the form to make the form look more friendly.
Including the following settings:
(1) set <fieldset>
(2) set the title
(3) set emphasize information
(4) set the prompt information
(5) emphasize the input box
(6) Special Effects of input boxes and buttons

4. Complex Form la s
For long and complex forms, there are not only text input boxes, but also single sheet and drop-down lists. At this time, the overall emission of various elements should be taken into account during the layout.
Including the following settings:
(1) Form Control group setting Style
(2) hide some labels