柚子快報(bào)激活碼778899分享：前端 CSS3表格和表單樣式
在傳統(tǒng)網(wǎng)頁中，表格主要用于網(wǎng)頁布局，因此也成為網(wǎng)頁編輯的主要工具；在標(biāo)準(zhǔn)化網(wǎng)頁設(shè)計(jì)中，表格的主要功能是顯示數(shù)據(jù)，也可適當(dāng)輔助結(jié)構(gòu)設(shè)計(jì)。本章主要介紹如何使用CSS控制表格和表單的顯示效果，如表格和表單的邊框、背景等樣式。
1、表格基本樣式
CSS為表格定義了5個(gè)專用屬性，詳細(xì)說明如下表所示： 除了上表介紹的5個(gè)表格專用屬性外，CSS的其他屬性對于表格一樣適用。
1.1、設(shè)計(jì)表格邊框線
使用CSS的border屬性代替
| 西 | 東 |
| 北 |
1.4、定義標(biāo)題樣式
使用CSS的caption-side屬性可以定義標(biāo)題的顯示位置，該屬性取值包括top（位于表格上面）、bottom（位于表格底部）、left（位于表格左側(cè)，非標(biāo)準(zhǔn)）、right（位于表格右側(cè)，非標(biāo)準(zhǔn)）。
如果要水平對齊標(biāo)題文本，則可以使用text-align屬性。對于左右兩側(cè)的標(biāo)題，可以使用vertical-align屬性進(jìn)行垂直對齊，取值包括top、middle和bottom，其他取值無效，默認(rèn)為top。
【示例】定義標(biāo)題靠左顯示，并設(shè)置標(biāo)題垂直居中顯示：
| 北 | 西 |
| 東 | 南 |
2、設(shè)計(jì)表單樣式
表單沒有獨(dú)立的CSS屬性，適用CSS通用屬性，如邊框、背景、字體等樣式。但是個(gè)別表單控件比較特殊，不易使用CSS定制，如下拉菜單、單選按鈕、復(fù)選框和文件域。如果完全設(shè)計(jì)個(gè)性化樣式，有時(shí)還需要JavaScript輔助實(shí)現(xiàn)。
2.1、定義文本框樣式
使用CSS可以對文本框進(jìn)行全面定制，如邊框、背景、補(bǔ)白、大小、字體樣式，以及CSS3圓角、陰影等。
【示例1】新建一個(gè)網(wǎng)頁，在
標(biāo)簽內(nèi)使用在
標(biāo)簽內(nèi)添加