整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML 表格

          TML 表格實例:

          First NameLast NamePoints
          JillSmith50
          EveJackson94
          JohnDoe80
          AdamJohnson67

          在線實例

          表格

          這個例子演示如何在 HTML 文檔中創建表格。

          HTML 表格

          表格由 <table> 標簽來定義。每個表格均有若干行(由 <tr> 標簽定義),每行被分割為若干單元格(由 <td> 標簽定義)。字母 td 指表格數據(table data),即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

          表格實例

          <table border="1">

          <tr>

          <td>row 1, cell 1</td>

          <td>row 1, cell 2</td>

          </tr>

          <tr>

          <td>row 2, cell 1</td>

          <td>row 2, cell 2</td>

          </tr>

          </table>

          在瀏覽器顯示如下::

          row 1, cell 1row 1, cell 2
          row 2, cell 1row 2, cell 2

          HTML 表格和邊框屬性

          如果不定義邊框屬性,表格將不顯示邊框。有時這很有用,但是大多數時候,我們希望顯示邊框。

          使用邊框屬性來顯示一個帶有邊框的表格:

          <table border="1">

          <tr>

          <td>Row 1, cell 1</td>

          <td>Row 1, cell 2</td>

          </tr>

          </table>

          HTML 表格表頭

          表格的表頭使用 <th> 標簽進行定義。

          大多數瀏覽器會把表頭顯示為粗體居中的文本:

          <table border="1">

          <tr>

          <th>Header 1</th>

          <th>Header 2</th>

          </tr>

          <tr>

          <td>row 1, cell 1</td>

          <td>row 1, cell 2</td>

          </tr>

          <tr>

          <td>row 2, cell 1</td>

          <td>row 2, cell 2</td>

          </tr>

          </table>

          在瀏覽器顯示如下:

          Header 1Header 2
          row 1, cell 1row 1, cell 2
          row 2, cell 1row 2, cell 2

          更多實例

          沒有邊框的表格

          本例演示一個沒有邊框的表格。

          表格中的表頭(Heading)

          本例演示如何顯示表格表頭。

          帶有標題的表格

          本例演示一個帶標題 (caption) 的表格

          跨行或跨列的表格單元格

          本例演示如何定義跨行或跨列的表格單元格。

          表格內的標簽

          本例演示如何顯示在不同的元素內顯示元素。

          單元格邊距(Cell padding)

          本例演示如何使用 Cell padding 來創建單元格內容與其邊框之間的空白。

          單元格間距(Cell spacing)

          本例演示如何使用 Cell spacing 增加單元格之間的距離。

          HTML 表格標簽

          標簽描述
          <table>定義表格
          <th>定義表格的表頭
          <tr>定義表格的行
          <td>定義表格單元
          <caption>定義表格標題
          <colgroup>定義表格列的組
          <col>定義用于表格列的屬性
          <thead>定義表格的頁眉
          <tbody>定義表格的主體
          <tfoot>定義表格的頁腳

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          TML中的表格是由<table>標簽進行定義的,表格在HTML中的表現形式與使用方法與word中的表格非常類似。多數情況使用Dreamweaver的可視化視圖只做表格更為簡單、方便。本文主要講述如何使用代碼來編寫表格,讓大家掌握表格的代碼書寫格式與其對應的屬性。

          表格的標簽組成

          HTML中的表格是由<table>為主體標簽,瀏覽器會將該標簽解釋為一個表格。表格中的行使用<tr>標簽進行定義。<tr>標簽為<table>標簽的子類,設置若干個<tr>標簽可以將表格分割為若干個行。<td>標簽用于定義表格的列,<td>標簽為又是<tr>標簽的子類,因此每個行都需要設置相應數量的<td>標簽來分割列,形成一個完整的表格。

          表格的標簽組合關系為:

          <table>

          <tr>

          <td>我是單元格1</td>

          <td>我是單元格2</td>

          </tr>

          </table>

          表格中可以插入文本、圖片、列表、段落、表單、水平線等任何html標簽,甚至可以用來做頁面布局。但是table布局存在代碼冗余過長、不符合HTML規范、搜索引擎不友好等問題。因此建議大家盡量不要使用table進行頁面布局,除非頁面中確實需要一張表格。

          剩下的<th>、<thead>、<tbody> 和 <tfoot>很少被用到,這是由于瀏覽器對它們的支持不太好。

          表格和邊框屬性

          表格自身可以定義border屬性來決定表格邊框的寬度,該屬性的值默認是以數字單位進行顯示,例如border=”1″該值的單位為px。注意,不要在border的數值后面加上任何單位,否該值無法正確識別。

          表格的表頭

          在<table>中可以通過<th>標簽設置表頭,表頭的<th>標簽與<tr>標簽屬于平級,并且表頭一般出現在<tr>標簽的前面。對于一個表格來說,表頭并不是必須的,可以根據需要插入表頭。<th>標簽內的文字會被自動加粗。

          單元格的合并

          單元格的合并分為垂直合并與水平合并,在合并時需要確定其他行與列中是否有對應數量的單元格。

          水平合并單元格使用colspan屬性,其值是用數字的形式確定需要合并的單元格數量,例如colspan=”2″即代表向右合并兩個單元格。

          垂直合并單元格使用rowspan屬性,與水平合并的屬性相同,同樣也是以數字形式確定需要合并的單元格數量,例如rowspan=”2″代表向下合并兩個單元格。

          實例演示代碼:

          <table border=“1”>

          <tr>

          <th>姓名</th>

          <th colspan=“2”>電話</th>

          </tr>

          <tr>

          <td>Bill Gates</td>

          <td>555 77 854</td>

          <td>555 77 855</td>

          </tr>

          </table><h4>橫跨兩行的單元格:</h4>

          <table border=“1”>

          <tr>

          <th>姓名</th>

          <td>Bill Gates</td>

          </tr>

          <tr>

          <th rowspan=“2”>電話</th>

          <td>555 77 854</td>

          </tr>

          <tr>

          <td>555 77 855</td>

          </tr>

          </table>

          單元格邊距

          表格具有與padding樣式類似的內邊距功能。通過在<table>標簽內定義cellpadding屬性,來為其標簽下的所有<td>元素設置內邊距。cellpadding屬性的參數是值是以數字的形式來確定邊距的大小,例如cellpadding=”10″ 則表示table中的所有<tr>標簽內邊距為10px

          單元格間距

          單元格的間距是設置<tr>標簽的外邊距,這個也與css樣式中的margin類似,通過在<table>標簽內定義cellspacing屬性,來為其標簽下的所有td元素設置外邊距。該屬性也是以數字的形式來確定外邊距的大小,例如cellspacing=”10″則表示這個table中的所有<tr>標簽的外邊距為10px

          為表格設置背景

          表格可以通過background屬性為表格或單元格設置任意圖片作為背景,其使用方法非常像css中的background。為background設置對應的圖片路徑,即可使單元格顯示相應的圖片。例如background=”table_bg.gif”

          表格內容的對齊排列

          表格的對齊分為水平對齊和垂直對齊。它們分別是align屬性與valign屬性,將這兩個屬性插入到對應的<td>標簽中即可完成單元格內文本或圖像的對齊。

          水平對齊align分別有三個值:left左對齊、center水平居中、right右對齊

          垂直對齊valign也有三個值:top頂端對齊、middle垂直居中、bottom底部對齊、baseline為基線對齊。

          其中基線對齊可能無法從字面上理解,其實基線對齊也就是文本出現在表格的中上部而不是正中央。如果文字不大的話,效果和middle差不多,比middle稍微靠上一點。

          私信發送【前端】有驚喜!

          .表格的制作

          1、表格元素–<table>

          表格中的行–<tr>

          表格中的列–<td>

          表格中的表頭–【居中/加粗】

          table標記的邊框–border

          table標記的寬度–width

          table標記的高度–height

          table標記的水平對齊方式–align

          table標記的表格背景色–bgcolor

          table標記的表格邊框色–bordercolor

          table標記的表格中的內容與邊框之間的距離–cellpadding

          table標記的表格中的邊框與邊框之間的距離–cellspacing【默認是1px】

          tr標記的align屬性–設置當前行的水平對齊方式

          tr標記的bgcolor屬性–設置當前行的背景色

          tr標記的valign屬性–設置當前行的垂直對齊方式【top/middle/bottom】

          td標記的align屬性–設置當前列的水平對齊方式

          td標記的bgcolor屬性–設置當前列的背景色

          td標記的valign屬性–設置當前列的垂直對齊方式【top/middle/bottom】

          合并單元格

          水平方向合并單元格–跨列—colspan

          • 垂直方向合并單元格–跨行—rowspan
          • 刪除多余的單元格*

          以下是計算器的控制面板代碼

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>計算器的控制面板</title>

          </head>

          <body>

          <table border="1" cellspacing="10px" cellpadding="20px"

          align="center" bgcolor="aliceblue">

          <tr><td colspan="5" height="40px" align="right"><font size="7"><b>0</b></font></td></tr>

          <tr align="center">

          <td>MC</td>

          <td>MR</td>

          <td>MS</td>

          <td>M+</td>

          <td>M-</td>

          </tr>

          <tr align="center">

          <td>&lt;-</td>

          <td>CE</td>

          <td>C</td>

          <td>+/-</td>

          <td>√</td>

          </tr>

          <tr align="center">

          <td>7</td>

          <td>8</td>

          <td>9</td>

          <td>/</td>

          <td>%</td>

          </tr>

          <tr align="center">

          <td>4</td>

          <td>5</td>

          <td>6</td>

          <td>*</td>

          <td>1/x</td>

          </tr>

          <tr align="center">

          <td>1</td>

          <td>2</td>

          <td>3</td>

          <td>-</td>

          <td rowspan="2" bgcolor="yellow">=

          </td>

          </tr>

          <tr align="center">

          <td colspan="2">0</td>

          <td>.</td>

          <td>+</td>

          </tr>

          </table>

          </body>

          </html>

          看成品:

          2. 列表元素

          2.1 有序列表

          ol—有序列表

          li—列表中的每一項【條目】

          默認的標志是有順序的數字

          我們可以通過ol的type屬性來修改標志

          1–有順序的數字

          a–有順序的小寫字母

          A–有順序的大寫字母

          i–有順序的小寫羅馬數字

          I–有順序的大寫羅馬數字

          start屬性設置書順序的開始值

          2.2 無序列表

          ul—無序列表

          li—列表中的每一項【條目】

          默認的標志是實心點

          我們可以通過ul的type屬性來修改標志

          circle–圓形【?!?/p>

          disc----實心點[默認]

          square–正方形

          none–沒有標志

          2.3 自定義列表

          dl—自定義列表

          dt—自定義列表的頭

          dd—子項目

          以下是有序,無序,和自定義列表

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>列表</title>

          </head>

          <body>

          <ul type="none">

          <li>無序列表</li>

          <li>無序列表</li>

          <li>無序列表</li>

          </ul>

          <ol type="A">

          <li>有序列表</li>

          <li>有序列表</li>

          <li>有序列表</li>

          </ol>

          <dl>

          <dt>自定義列表</dt>

          <dt>自定義列表</dt>

          <dt>自定義列表</dt>

          </dl>

          </body>

          </html>

          3. 表單<form>

          主要負責采集信息的,可以將采集的信息提交。

          form的屬性

          action—指定表單數據的后端處理程序

          method----指定表單數據的提交方式【get[默認]/post】

          get提交數據會將被處理的數據跟隨在請求地址之后

          被提交的數據255個字符

          https://www.baidu.com/s?&wd=html

          post提交數據會將被處理的數據封裝到http協議的頭

          https://www.baidu.com/s

          被提交的數據沒有限制

          通常情況下提交文件只能用post

          enctype屬性規定在將表單數據發送到服務器之前如何對其進行編碼。

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title></title>

          </head>

          <body>

          <table border="1" align="center" cellpadding="20px" cellspacing="0">

          <tr>

          <td>application/x-www-form-urlencoded</td>

          <td>在發送前對所有字符進行編碼(默認)。</td>

          </tr>

          <tr>

          <td>multipart/form-data</td>

          <td>不對字符編碼。當使用有文件上傳控件的表單時,該值是必需的。

          </td>

          </tr>

          <tr>

          <td>text/plain</td>

          <td>將空格轉換為 "+" 符號,但不編碼特殊字符。</td>

          </tr>

          </table>

          </body>

          </html>

          表單元素

          input 文本框/密碼框/單選按鈕/復選框…

          seletc 下拉列表

          textarea 文本域—富文本編輯器


          主站蜘蛛池模板: 精品一区二区三区自拍图片区| 亚洲av成人一区二区三区在线观看 | 国产精品亚洲一区二区麻豆| 无码少妇A片一区二区三区| 国产91精品一区| 麻豆果冻传媒2021精品传媒一区下载| 亚洲一区二区三区四区在线观看| 99偷拍视频精品一区二区| 国精无码欧精品亚洲一区| 国产婷婷色一区二区三区深爱网 | 亚洲综合无码一区二区痴汉 | 国精产品999一区二区三区有限 | 在线视频精品一区| 无码人妻精品一区二区三区不卡| 国产成人av一区二区三区在线观看| 中文字幕乱码一区二区免费 | 在线一区二区三区| 少妇特黄A一区二区三区| 久久亚洲色一区二区三区| 国产成人精品一区二三区 | 韩国福利一区二区美女视频| 国产日韩AV免费无码一区二区| 在线精品亚洲一区二区| 亚洲综合无码一区二区三区| 国产视频一区在线观看| 亚洲中文字幕无码一区| 中文字幕亚洲一区二区va在线| 日韩AV片无码一区二区不卡| 亚洲AV无码国产一区二区三区 | 无码毛片一区二区三区视频免费播放 | 国产激情精品一区二区三区| 视频精品一区二区三区| 国产观看精品一区二区三区| 亚洲国产老鸭窝一区二区三区| 夜夜高潮夜夜爽夜夜爱爱一区| 亚洲一区二区三区久久久久| 99精品一区二区三区无码吞精| 亚洲爆乳精品无码一区二区三区| 岛国精品一区免费视频在线观看| 一区二区三区免费视频观看 | 色一乱一伦一图一区二区精品|