表格table

表格作用：

存在即是合理的。 表格的現在還是較為常用的一種標簽，但不是用來布局，常見顯示、展示表格式數據。

因為它可以讓數據顯示的非常的規整，可讀性非常好。

特別是后臺展示數據的時候表格運用是否熟練就顯得很重要，一個清爽簡約的表格能夠把繁雜的數據表現得很有條理，雖然 div 布局也可以做到，但是總沒有表格來得方便

1. 創建表格

在HTML網頁中，要想創建表格，就需要使用表格相關的標簽。

創建表格的基本語法：

<table>
  <tr>
    <td>單元格內的文字</td>
    ...
  </tr>
  ...
</table>

在上面的語法中包含基本的三對HTML標簽，分別為 table、tr、td，他們是創建表格的基本標簽，缺一不可，下面對他們進行具體地解釋

table用于定義一個表格標簽。

tr標簽 用于定義表格中的行，必須嵌套在 table標簽中。

td 用于定義表格中的單元格，必須嵌套在<tr></tr>標簽中。

字母 td 指表格數據（table data），即數據單元格的內容，現在我們明白，表格最合適的地方就是用來存儲數據的。

2. 表格屬性

表格有部分屬性我們不常用，這里重點記住 cellspacing 、 cellpadding。

屬性名	含義	常用屬性值
border	設置表格的邊框(默認border="0"無邊框)	像素值
cellspacing	設置單元格與單元格邊框之間的空白間距	像素值(默認為2像素)
cellpadding	設置單元格內容與單元格邊框之間的空白間距	像素值(默認為1像素)
width	設置表格的寬度	像素值
height	設置表格的高度	像素值
align	設置表格在網頁中的水平對齊方式	left、center、right

我們經常有個說法，是三參為0， 平時開發的我們這三個參數 border cellpadding cellspacing 為 0

<table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center">
   <tr>  <th>姓名</th>   <th>性別</th> <th>年齡</th>  </tr>
   <tr>  <td>劉德華</td> <td>男</td> <td>55</td>  </tr>
   <tr>  <td>郭富城</td> <td>男</td> <td>52</td>  </tr>
   <tr>  <td>張學友</td> <td>男</td> <td>58</td>  </tr>
   <tr>  <td>黎明</td>   <td>男</td> <td>18</td>  </tr>
   <tr>  <td>劉曉慶</td> <td>女</td> <td>63</td>  </tr>
</table>

3. 表頭單元格標簽th

作用：一般表頭單元格位于表格的第一行或第一列，并且文本加粗居中

語法：只需用表頭標簽<th></th>替代相應的單元格標簽<td></td>即可。

<table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
　　<tr>  
　　　　<th>姓名</th> 
　　　　<th>性別</th>
　　　　<th>電話</th>
　　</tr>
　　<tr>
　　　　<td>小王</td>
　　　　<td>女</td>
　　　　<td>110</td>
　　</tr>
　　<tr>
　　　　<td>小明</td>
　　　　<td>男</td>
　　　　<td>120</td>
　　</tr>    
</table>

4. 表格標題

定義和用法

<table>
   <caption>我是表格標題</caption>
</table>

注意：

caption 元素定義表格標題，通常這個標題會被居中且顯示于表格之上。

caption 標簽必須緊隨 table 標簽之后。

這個標簽只存在 表格里面才有意義。

5. 合并單元格

合并單元格的2種方式

跨行合并：rowspan="合并單元格的個數"

跨列合并：colspan="合并單元格的個數"

合并單元格的順序:合并的順序我們按照 先上 后下 先左 后右 的順序

6. 擴展閱讀

表格劃分結構:
對于比較復雜的表格，表格的結構也就相對的復雜了，所以又將表格分割成三個部分：題頭、正文和腳注。而這三部分分別用:thead,tbody,tfoot來標注， 這樣更好的分清表格結構

注意：

<thead></thead>：用于定義表格的頭部。用來放標題之類的東西。<thead> 內部必須擁有 <tr> 標簽！

<tbody></tbody>：用于定義表格的主體。放數據本體 。

<tfoot></tfoot>放表格的腳注之類。

以上標簽都是放到table標簽中。

列表標簽

概念：

容器里面裝載著結構，樣式一致的文字或圖表的一種形式，叫列表

特點：

列表最大的特點就是 整齊 、整潔、 有序，跟表格類似，但是他可組合自由度會更高。

1. 無序列表ul

無序列表的各個列表項之間沒有順序級別之分，是并列的。其基本語法格式如下：

<ul>
  <li>列表項1</li>
  <li>列表項2</li>
  <li>列表項3</li>
  ......
</ul>

注意:

　　1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的。
　　2. <li>與</li>之間相當于一個容器，可以容納所有元素。

2. 有序列表ol

有序列表即為有排列順序的列表，其各個列表項按照一定的順序排列定義，有序列表的基本語法格式如下：

<ol>
  <li>列表項1</li>
  <li>列表項2</li>
  <li>列表項3</li>
  ......
</ol>

所有特性基本與ul 一致。 但是實際中比 無序列表 用的少很多。

3. 自定義列表

定義列表常用于對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號。其基本語法如下：

<dl>
  <dt>名詞1</dt>
  <dd>名詞1解釋1</dd>
  <dd>名詞1解釋2</dd>
  ...
  <dt>名詞2</dt>
  <dd>名詞2解釋1</dd>
  <dd>名詞2解釋2</dd>
  ...
</dl>

清除列表默認樣式

無序和有序列表前面默認的列表樣式，在不同瀏覽器顯示效果不一樣，而且也比較難看，所以，我們一般上來就直接去掉這些列表樣式就行了。 代碼如下

li { list-style: none; }

表單標簽

作用：

表單目的是為了收集用戶信息。

在我們網頁中， 我們也需要跟用戶進行交互，收集用戶資料，此時也需要表單。

在HTML中，一個完整的表單通常由表單控件（也稱為表單元素）、提示信息和表單域3個部分構成。

表單控件：

包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。

提示信息：

一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。

表單域：

他相當于一個容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表單數據所用程序的url地址，以及數據提交到服務器的方法。如果不定義表單域，表單中的數據就無法傳送到后臺服務器。

1. input 控件

語法:

<input type="屬性值" value="你好">

input 輸入的意思

<input />

type屬性設置不同的屬性值用來指定不同的控件類型

除了type屬性還有別的屬性

常用屬性:

1. type屬性

這個屬性通過改變值，可以決定了你屬于那種input表單。

比如 type = 'text' 就表示 文本框 可以做 用戶名， 昵稱等。

比如 type = 'password' 就是表示密碼框 用戶輸入的內容 是不可見的。

用戶名: <input type="text" /> 
密  碼：<input type="password" />

2. value屬性 值

用戶名:<input type="text"  name="username" value="請輸入用戶名"> 

value 默認的文本值。 有些表單想剛打開頁面就默認顯示幾個文字，就可以通過這個value 來設置。

3.name屬性

用戶名:<input type="text"  name=“username” />  

name表單的名字， 這樣，后臺可以通過這個name屬性找到這個表單。 頁面中的表單很多，name主要作用就是用于區別不同的表單。

name屬性后面的值，是我們自己定義的。

radio 如果是一組，我們必須給他們命名相同的名字 name 這樣就可以多個選其中的一個啦

<input type="radio" name="sex"  />男
<input type="radio" name="sex" />女

4.checked屬性

表示默認選中狀態。 較常見于 單選按鈕和復選按鈕。

性    別:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女 

2. label標簽

目標：

label標簽主要目的是為了提高用戶體驗。 為用戶提高最優秀的服務。

概念：

label 標簽為 input 元素定義標注（標簽）。

作用：

用于綁定一個表單元素, 當點擊label標簽的時候, 被綁定的表單元素就會獲得輸入焦點。

如何綁定元素呢？

1. 第一種用法就是用label直接包括input表單。
<label> 用戶名： <input type="radio" name="usename" value="請輸入用戶名">   </label>
<label for="sex">男</label>
<input type="radio" name="sex"  id="sex">

2. 第二種用法 for 屬性規定 label 與哪個表單元素綁定。
<label for="sex">男</label>
<input type="radio" name="sex"  id="sex">

3. textarea控件(文本域)

語法：

<textarea >
  文本內容
</textarea>

作用：

通過textarea控件可以輕松地創建多行文本輸入框.

cols="每行中的字符數" rows="顯示的行數" 我們實際開發不用

文本框與文本域的區別:

表單	名稱	區別	默認值顯示	用于場景
input type="text"	文本框	只能顯示一行文本	單標簽，通過value顯示默認值	用戶名、昵稱、密碼等
textarea	文本域	可以顯示多行文本	雙標簽，默認值寫到標簽中間	留言板

4. select下拉列表

目的：

如果有多個選項讓用戶選擇，為了節約空間，我們可以使用select控件定義下拉列表.

語法：

<select>
  <option>選項1</option>
  <option>選項2</option>
  <option>選項3</option>
  ...
</select>

<select>中至少包含一對option

在option 中定義selected =" selected "時，當前項即為默認選中項。

但是我們實際開發會用的比較少

form表單域

在HTML中，form標簽被用于定義表單域，以實現用戶信息的收集和傳遞，form中的所有內容都會被提交給服務器。

語法:

<form action="url地址" method="提交方式" name="表單名稱">
  各種表單控件
</form>

常用屬性：

屬性	屬性值	作用
action	url地址	用于指定接收并處理表單數據的服務器程序的url地址。
method	get/post	用于設置表單數據的提交方式，其取值為get或post。
name	名稱	用于指定表單的名稱，以區分同一個頁面中的多個表單。

注意:

每個表單都應該有自己表單域。我們現在做頁面，不寫看不到效果，但是 如果后面學 ajax 后臺交互的時候，必須需要 form表單域。

總結

以上是生活随笔為你收集整理的HTML表格与表单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。