html之表格標籤詳解-html教學-PHP中文網

首頁

web前端

html教學

html之表格標籤詳解

迷茫

Mar 25, 2017 am 11:31 AM

聲明 1:這裡的文字都是我從我自己csdn帳號拷貝過來，是本人學習總結的結晶，所以請尊重本作品。 2：如要轉載本文章，則要說明文字的出處。 3：如有哪裡不對歡迎指出。

在上一篇文章中主要講了，http的一些基礎標籤，比方說連結標籤，圖片標籤，html框架等，那接下來主要針對表格標籤，清單標籤，表單標籤做一個詳細的講解

1：表格標籤

表格的標籤

 <!DOCTYPE html>
     <html>
         <head>
             <!-- 原创作者：蜗牛 -->
             <title>table标签</title>
         </head>
         <body>
             <table  border="1" width="360"  height="240" 
                     cellspacing="1" cellpadding="1" 
                     align="center" bgcolor="red">   <!--这里的center表示该表格在页面的中间位置-->
                                                     <!--这里的背景色标签是bgcolor-->
                     <caption><h2>我的好朋友</caption>
 
                      <tr>
                          <th>姓名</th>
                  <th>性别</th>
                          <th>年龄</th>
                          <th>爱好</th>                     
                      </tr>
 
                      <tr align="center">          <!--这里的center表示的是表格里面的字体居中-->
                          <td>小红</td>
                          <td>女</td>
                          <td>20</td>
                          <td>跳舞</td>
                      </tr>
 
                      <tr align="center"> 
                          <td>小舵</td>
                          <td>女</td>
                          <td>24</td>
                          <td>唱歌</td>
                      </tr>
                     
                 </table>
</body>
</html>

## 註：

標籤用來表示行

標籤用於表示列

標籤用於表示表格的標題，用法與 td>一樣只是裡面的內容會自動加大加粗

border 設定表格邊框的寬度，單位為pixel

width

##width

width 一樣為單位設定表格高度，單位為pixel

cellspacing 設定儲存格之間的距離,就指表格表格邊框的間距

cellpadding 設定文字距離儲存格邊框的距離

# bgcolor 設定表格的背景顏色

align 用於設定對齊方式，例如center，left，right

<caption> )，表名

#（2）關於合併儲存格

<!DOCTYPE html>
<html>
    <head>     
        <title>table中合并单元格</title>
    </head>
    <body>
        <table  border="1" width="300"  height="200" 
                align="center" background="first.jpg" >  <!--background代表的是背景图片，bgcolor代表背景色完全不一样-->

                  <tr align="center" width="100" >
                     <td>1</td>
                     <td colspan="2">占两列</td>    <!--当colspan="2"表示在同一行中，两列并一列，那么在它下面少写一个<td></td>标签-->
                     <!-- 删除掉此<td></td> -->
                     <td>2</td>
                 </tr>

                 <tr   align="center" width="100">  
                     <td rowspan="2">占两行</td>   <!--当 rowspan="2"表示在同一列中 两行并一行，那么在同一列中删掉一个<td></td>标签-->
                     <td>3</td>
                     <td>4</td>
                     <td>5</td>
                 </tr>

                  <tr   align="center" width="100" >
                    <!-- 删除掉此<td></td> -->
                     <td>6</td>
                     <td>7</td>
                     <td>8</td>
                 </tr>          
            </table>
   </body>
</html>

注意：當你在表格的每個儲存格中輸入不同內容是，你的內容長度不同內容會改變，並且想要每個儲存格保持一樣大有兩種方法1；例如當你的表格總hight為400，你設定4行，那麼在每個標籤中加入屬性：hight=100；就相當於平均分配，同樣寬度用同樣方法。 2：會比第一種簡便，就是設定css樣式，把tr和td大小固定

2：列表標籤

##
<!DOCTYPE html> <html> <head> <title>列表标签</title> </head> <body bgcolor="#FFFF00">  2017年心愿 <ul type="circle">  <li>父母身体健康</li> <li>宝宝健康成长</li> <li>媳妇健健康康</li> </ul>  2017年大事件 <ol type="1" start="2">  <li>老婆要生小孩了</li> <li>自己换工作了</li> <li>要卖掉一套房</li> </ol>  <dl>  <dt>时刻告诉自己</dt> <dd>不抱怨</dd> <dd>零负能量</dd> <dd>该与不该</dd> </dl> </body> </html>
執行結果如下：

#3：表單
## 表單標籤

<!DOCTYPE html> <head> <title>form表单</title> </head> <body>  <form action="Myservlet" method="post" onSubmit="return submitFun();">  <fieldset>  <legend>用户注册</legend>    用户名:<input type="text" name="username" /><br/><br/> 密码 :<input type="password" name="password"/><br/><br/>   性别:男性<input type="radio" name="sex" value="male" checked="checked">  女性<input type="radio" name="sex" value="female"> <br/><br/> 学历: <select name="education">  <option value="gz">博士</option>  <option value="yjs">研究生</option> <option value="bk" selected="selected">本科</option>  <option value="zk">专科</option> </select> <br/><br/> 兴趣爱好:<input type="checkbox" name="likes" value="bike" />骑车  <input type="checkbox" name="likes" value="sleep" checked="checked" />睡觉  <input type="checkbox" name="likes" value="eat" />吃饭 <input type="checkbox" name="likes" value="daima" />敲代码 <br/> 备注:<textarea cols="40" rows="5" name="bz"></textarea> <br/><br/>  个人头像:<input type="file"><br>   个人网站:<input type="url" value="www.baidu.com" disabled="disabled"> <br> 个人邮箱:<input type="email"><br>  身体体重:<input type="number"><br>  出生日期:<input type="date"><br>  详细时间:<input type="time"><br>  隐藏项： <input type="hidden" value="你们看不到我"><br>  <input type="button" value="填写完毕">  <input type="reset" value="重置信息">  <input type="submit" value="完成注册">  <input type="image" src="first.jpg" height="20" width="40">  47 </fieldset> </form> </body> </html>
效果圖如下：

#

以上是html之表格標籤詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract