css011 formatting of tables and forms

css011 formatting tables and forms

First, make the form a professional

Create a three-row, three-column table in HTML

<table>

<caption align= "Bottom" >

Table 1:cosmofarmer.com ' s indoor mower roundup

</caption>

<colgroup>

<col id= "Brand" ></col>

<col id= "Price" ></col>

<col id= "Power" ></col>

</colgroup>

<thead>

<tr>

<th scope= "Col" >brand</th>

<th scope= "Col" >price</th>

<th scope= "Col" >power</th>

</tr>

</thead>

<tbody>

<tr>

<td>hello</td>

<td>$988</td>

<td>lal</td>

</tr>

<tr>

<td>hi</td>

<td>$1000</td>

<td>lalala</td>

</tr>

</tbody>

</table>

Tags used more <table> <caption> <colgroup> <col> <thead> <tr> <th> <td>

Second, define a style for a table

1. Add padding

td{padding:10px 5px 2px 6px;}

2. Adjust the vertical and horizontal alignment

Text-align and Vertical-align

Text-align Control horizontal positioning direction

Value: Left Right center justify

Table {Text-align:center;}

Vertical-align adjusting the orientation of vertical orientation

Value: Top Baseline Middle Bottom

3. Create border border

Control the spaces between tables

border-spacing:5px;

table{border-spacing:5px;}

4, the elimination of bilateral boxes

table{Border-collapse:collapse;}

5. Rounded Corners

Border-radius

td{

BORDER:1PX solid black;

border-radius:5px;

}

6. Define styles for rows and columns

Tr:nth-of-type (odd) {background-color:red;}

Tr:nth-of-type (even) {background-color:blue;}

Td:nth-of-type (odd) {background-color:red;}

Td:nth-of-type (even) {background-color:red;}

Third, define a style for a form

Font background-color color margin padding, etc.

1. HTML form elements

<fieldset>

<legend></legend>

</fieldset>

Text fields (field)

button

Drop-down menus (Down menu)

CheckBox (check box)

2, using CSS layout form

A, each label tag is surrounded by a tag tag.

B. Set the Display property value to Inline-block and the width

. albel{

Display:inline-block;

width:20px;

}

C, adjust the style

. albel{

Float:left;

width:20px;

Vertical-align:top;

Text-align:right;

margin-top:20px;

}

css011 formatting of tables and forms