1. 首頁 > 生活百科 > >

day02-HTML02

生活百科day02-HTML02

4.HTML4.3HTML基本標簽4.3.9表格(table)標簽

  • 基本語法：
<table border="邊框寬度" cellspacing="空隙大小" cellpadding="填充大小"></table>
  • 說明：
table 是表格標簽，border 設置表格標簽
width 設置表格寬度 ， height 設置表格高度
align 設置表格相對于頁面的對其方式
cellspacing 設置單元格間的空隙大小，0表示沒有空隙
tr 是行標簽，th是表頭標簽 ， td是單元格標簽
align設置單元格文本對齊方式，b是加粗標簽
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表格標簽</title></head><body><h1 align="center">標簽表格的使用</h1><!--使用表格標簽顯示三行三列的表格--><!--px表示像素，不寫單位默認就是像素--><table width="500" border="5" align="center"><tr><th>姓名</th><th>地址</th><th>郵件</th></tr><tr><td>第1行第1列</td><td>第1行第2列</td><td>第1行第3列</td></tr><tr><td>第2行第1列</td><td>第2行第2列</td><td>第2行第3列</td></tr><tr><td>第3行第1列</td><td>第3行第2列</td><td>第3行第3列</td></tr></table></body></html>
day02-HTML02

文章插圖
  • 跨行跨列表格
    • 合并列：colspan="列數"
    • 合并列：rowspan="行數"
    • cellspacing：設置單元格間的空隙大小，0表示沒有空隙
    • bordercolor：指定表格邊框的顏色
    使用表格標簽 ， 展示如下的表格：

day02-HTML02

文章插圖
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>跨行跨列表格</title><!--思路：1.先把整個表格完整的行和列展示出來5*32.再使用合并的技術來處理3.十六進制表現的顏色前名要加#號--></head><body><h2>跨行跨列表格</h2><table border="1" bordercolor="#E87EFA" width="500" cellspacing="0"><tr><!--合并了三列--><td colspan="3" align="center">第1行第1列</td></tr><tr><!--合并行，跨行row--><td rowspan="2">第2行第1列</td><td>第2行第2列</td><td>第2行第3列</td></tr><tr><td>3.2</td><td>33</td></tr><tr><!--合并行，跨行row--><td rowspan="2">第4行第1列</td><td>42</td><td>43</td></tr><tr><td>52<img src="https://www.huyubaike.com/biancheng/imgs/2.png" width="100"></td><td>53</td></tr></table></body></html>
day02-HTML02

文章插圖
4.3.10表單form標簽表單語法：
  • form 表示表單
  • action 表示提交到哪個頁面
  • method 表示提交方式，常用get和post
  • input type="text"輸入框
  • input type="password"密碼框
  • input type="submit" 提交按鈕
  • input type="reset" 重置按鈕
<form action="url" method=*>......<input type="submit"><input type="reset"></form>其中 url 表示定位一個web資源的路徑
method的星號可以為get，也可以是post，不寫的話默認是get
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表單登錄</title></head><body><h1>登錄系統</h1><form action="ok.html" method="post">用戶名： <input type="text" name="username"><br/><!--為了漢字對齊，輸入全角的空格即可-->密　碼： <input type="password" name="username"><br/><input type="submit" value="https://www.huyubaike.com/biancheng/登錄">　<input type="reset" value="https://www.huyubaike.com/biancheng/重新填寫"></form></body></html><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>登錄成功</title></head><body><h1>登錄成功！</h1></body></html>
day02-HTML02

文章插圖
day02-HTML02

文章插圖
4.3.11input標簽<input> 元素有很多形態，根據不同的 type 屬性

推薦閱讀