何為表格
- 在Web的歷史中银亲,HTML的表格發(fā)揮了極大的作用慢叨。最 初創(chuàng)建表格就是為了以表格的形式顯示數(shù)據(jù),后來(lái)表格 變成了一個(gè)極受歡迎的布局工具务蝠。
- 但是有了CSS以后拍谐,CSS在布局網(wǎng)頁(yè)方面實(shí)際上會(huì)更出 色,所以現(xiàn)在我們使用表格的作用只有一個(gè)馏段,就是用來(lái) 表示格式化的數(shù)據(jù)轩拨。
- HTML中的表格可以很復(fù)雜,但是通常情況下我們不需 要?jiǎng)?chuàng)建過(guò)于復(fù)雜的表格院喜。
table亡蓉、tr、th够坐、td
- 使用table標(biāo)簽創(chuàng)建一個(gè)表格寸宵。
- tr表示表格中的一行。
- tr中可以編寫(xiě)一個(gè)或多個(gè)th或td元咙。
- th表示表頭梯影。
- td表示表格中的一個(gè)單元格。
caption庶香、thead甲棍、tbody、tfoot
- caption表示表格的標(biāo)題赶掖。
- thead表示表格的頭部感猛。
- tbody表示表格的主體七扰。
- tfoot表示表格的底部。
合并單元格
- 合并單元格指將兩個(gè)或兩個(gè)以上的單元格 合并為一個(gè)單元格陪白。
- 合并單元格可以通過(guò)在th或td中設(shè)置屬性 來(lái)完成颈走。
- 橫向合并
colspan- 縱向合并
rowspan
表格的樣式
- 之前學(xué)習(xí)的很多屬性都可以用來(lái)設(shè)置表格的樣式,比如color可以用 來(lái)設(shè)置文本的顏色咱士。padding可以設(shè)置內(nèi)容和表格邊框的距離立由。
- text-align:設(shè)置文本的水平對(duì)齊。
- vertical-align:設(shè)置文本的垂直對(duì)齊序厉。
可選值:top锐膜、baseline、middle弛房、bottom- border-spacing:邊框間距
- border-collapse:合并邊框
collapse:合并邊框
separate:不合并邊框
何為表單
- 現(xiàn)實(shí)生活中的表單是用來(lái)提交信息的道盏,比 如:辦理銀行卡填寫(xiě)的申請(qǐng)表、找工作填 寫(xiě)的簡(jiǎn)歷文捶、入學(xué)時(shí)填寫(xiě)的個(gè)人信息表荷逞。這 些都是表單的一種
網(wǎng)頁(yè)中的表單是用來(lái)向服務(wù)器提交信息的, 我們最常用到的表單就是baidu的搜索框
image.png
input
- input是我們使用的最多的表單項(xiàng)拄轻,它可以 根據(jù)不同的type屬性呈現(xiàn)不同的狀態(tài)颅围。
- type屬性可選值:
text:文本框
password:密碼框
submit:提交按鈕
radio:?jiǎn)芜x按鈕
checkbox:多選框
reset :重置按鈕
select、option
- select用于創(chuàng)建一個(gè)下拉列表恨搓。
- option表示下拉列表中的列表項(xiàng)院促。
- optgroup用于為列表項(xiàng)分組。
textarea
- textarea用來(lái)創(chuàng)建一個(gè)文本域斧抱,實(shí)際效果和 文本框類(lèi)似常拓,只是可以輸入多行數(shù)據(jù)。
- 可用屬性:
cols:文本域的列數(shù)
rows:文本域的行數(shù)
fieldset辉浦、legend弄抬、label
- fieldset用來(lái)為表單項(xiàng)進(jìn)行分組。
- legend用于指定每組的名字宪郊。
- label標(biāo)簽用來(lái)為表單項(xiàng)定義描述文字掂恕。