首頁 > 開發者 > 網站開發

html表格的基本用法

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：min   submit   color   不顯示   val   跨行   邊框   html表格   for   

表格的基本用法

   1、<!DOCTYPE html><html><head lang="en">

    <meta charset="UTF-8">

    <title>表格的使用</title></head><body><!--

border:表格的邊框

cellspacing：儲存格之間的距離

cellpadding：儲存格與內容之間的距離

width:代表表格在整個瀏覽器中的寬度顯示

bgcolor:表格的背景色

align:表格中內容的對齊-->

   <table  border="1" cellspacing="0" cellpadding="5" width="100%" bgcolor="#ffc0cb">

       <tr  align="center">

           <td>第1行第1列</td>

           <td>第1行第2列</td>

           <td>第1行第3列</td>

           <td>第1行第4列</td>

       </tr>

       <tr align="center">

           <td>第2行第1列</td>

           <td>第2行第2列</td>

           <td>第2行第3列</td>

           <td>第2行第4列</td>

       </tr>

   </table>

</body></html>

2、<!DOCTYPE html><html><head lang="en">

    <meta charset="UTF-8">

    <title>進階表格的使用</title></head><body>

 <table width="80%" cellspacing="0" cellpadding="0" border="1">

     <!--標題-->

 <caption>年終資料報表</caption>

    <!--頁首-->

     <thead bgcolor="yellow">

     <!--表頭-->

     <tr>

         <th>月份</th>

         <th>收入</th>

     </tr>

     </thead>

     <!--主體-->

     <tbody bgcolor="pink">

     <tr>

         <td>1</td>

         <td>1000</td>

     </tr>

     <tr>

         <td>2</td>

         <td>2000</td>

     </tr>

     <tr>

         <td>3</td>

         <td>3000</td>

     </tr>

     <tr>

         <td>4</td>

         <td>4000</td>

     </tr>

     </tbody>

     <!--頁尾-->

     <tfoot bgcolor="green">

     <tr>

         <td>平均月收入</td>

         <td>4000</td>

     </tr>

     <tr>

         <td>總計</td>

         <td>40000</td>

     </tr>

     </tfoot>

 </table></body></html>

3、跨行和跨列

<!DOCTYPE html><html><head lang="en">

    <meta charset="UTF-8">

    <title>表格的跨行跨列</title></head><body><!-- 跨行和跨列 只能在 列中td使用-->

 <table width="80%" cellspacing="0" cellpadding="0" border="1">

     <tr>

         <!--學產生績跨了3列-->

         <td colspan="3">學產生績</td>

     </tr>

     <tr>

         <!--張三跨了2行-->

         <td rowspan="2">張三</td>

         <td>語文</td>

         <td>85</td>

     </tr>

     <tr>

         <td>數學</td>

         <td>85</td>

     </tr>

     <tr>

         <td rowspan="2">李四</td>

         <td>語文</td>

         <td>85</td>

     </tr>

     <tr>

         <td>數學</td>

         <td>85</td>

     </tr>

 </table></body></html>

4、iframe內聯架構

<!DOCTYPE html><html><head lang="en">

    <meta charset="UTF-8">

    <title>內聯架構</title></head><body><!--

src:需要引入的檔案路徑

frameborder:是否顯示邊框   0  不顯示   1 顯示

scrolling：是否顯示下拉框 auto   no  yes

align:根據周圍的元素 這是位置

srcdoc：在內聯架構中顯示html內容

seamless:預設不顯示邊框和下拉框

name:內聯架構的名稱-->

<iframe src="http://www.baidu.com"   srcdoc="<h1>哈哈</h1>"  align="top">

</iframe>

<iframe src="http://www.baidu.com" seamless="seamless"></iframe>

</body></html>

二、HTML5中的一些基本屬性

<!DOCTYPE html><html><head lang="en">

    <meta charset="UTF-8"></head><body><form action="#" method="post">

 

    <input type="number" min="1" max="5">

    <input type="date" min="1990-01-01">

    <input type="date" max="2016-12-09">

    <input type="time" value="14:43">

    <input type="email">

    <button type="submit">提交</button></form>

</body></html>

html表格的基本用法

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More