HTML中的表格元素介紹

  發布時間:2022-02-26 15:39:59   作者:.NET開發菜鳥   我要評論
這篇文章介紹了HTML中的表格元素,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

表格元素的作用:用來格式化顯示數據。

一、表格的基本結構

表格的基本語法:

<TABLE border="設置表格邊框尺寸大小" width="" cellpadding="" cellspaning="">
   <TR align="對齊方式">
      <TD align="">
         單元格內容
      </TD>
      ......
   </TR>
   ......
</TABLE>

<TABLE></TABLE>:定義表格
<TR></TR>:定義行
<TD></TD>:定義列

示例:

主要屬性:
border:邊框的寬度,單位是像素(缺省值是0)
width:表格的寬度,可以用百分比(表示該表格占父標記的寬度),也可以是絕對值
cellpadding:單元格內容與單元格之間的空隙
cellspacing:單元格與單元格之間的空隙
align:對齊方式,值有"center","right","left"
colspan:水平方向延伸單元格,值為一正整數,代表此單元格水平延伸的單元格數
rowspan:垂直方向延伸單元格,值為一正整數,代表此單元格垂直延伸的單元格數。

<caption>表格的題注:caption元素必須包含在table元素中,而且必須緊跟在<table>的開始標記之后,默認居中顯示。

語法
開始標記:必須
內容:行內標記
結束標記:必需
主要屬性
align屬性:用以確定題注的位置,可以有五種取值
bottom、center、laft、right、top

例如:定義一個基本的表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格</title>
</head>
<body>
    <table>
        <tr>
            <td>第一行第一列</td>
            <td>第一行第二列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
        </tr>
    </table>
</body>
</html>

結果:

二、表格美化

1、設置表格的尺寸和邊框

width:用來設置表格的寬度
height:用來設置表格的高度
border:用來設置表格邊框尺寸大小
bordercolor:用來設置表格邊框顏色

<table width="400" height="200" border="15" bordercolor="red">
    <tr>
      <td colspan="4" align="center">品牌商城</td>
    </tr>
    <tr>
      <td colspan="2">筆記本電腦</td>
   <td colspan="2">辦公設置、文具、耗材</td>
    </tr>
    <tr>
      <td>惠普</td>
   <td>華碩</td>
   <td>打印機</td>
   <td>刻錄盤</td>
    </tr>
 </table>

示例:

2、設置背景圖片和背景色

background:屬性用來設置表格的背景圖片
bgcolor:屬性用來設置表格、行、列的背景色。“#EBEFFF”是用RGB表示的一種顏色值,RGB指的是紅綠藍

<table width="360" height="120" border="2" background="Images\img.jpg">
    <tr>
       <td colspan="6">&nbsp;</td>
    </tr>
    <tr>
       <td colspan="3">筆記本電腦</td>
    <td colspan="3" bgcolor="yellow">辦公設備、文具、耗材</td>
    </tr>
    <tr>
       <td>IBM</td>
    <td>惠普</td>
    <td>華碩</td>
    <td>打印機</td>
    <td>刻錄盤</td>
    <td>墨盒</td>
    </tr>
 </table>

示例:

3、設置對齊方式

align:屬性用來設置表格、行、列的對齊方式。

有三種取值

  • left:居左對齊 默認
  • right:居右對齊
  • center:居中對齊

示例:

4、填充屬性和間距屬性

cellpadding:單元格填充,用來設置表格內填充距離,表示每一個單元格的厚度,值越大,單元格內容離單元格距離就越大
cellspacing:單元格間距,用來設置表格內框寬度,表示兩個單元格之間的距離。值越大,單元格與單元格之間的距離就越大

填充屬性和間距屬性:

<body>
    <table border="20" cellpadding="30" cellspacing="40" bordercolor="red">
   <tr bordercolor="green">
     <td colspan="4">品牌商城</td>
   </tr>
   <tr>
     <td colspan="2">筆記本電腦</td>
  <td colspan="2">辦公設備、文具、耗材</td>
   </tr>
   <tr>
     <td>惠普</td>
  <td>華碩</td>
  <td>打印機</td>
  <td>刻錄盤</td>
   </tr>
 </table>
 </body>

示例:

設置表格的填充屬性示例:

5、設置跨行、跨列的表格

colspan:水平方向延伸單元格,值為一正整數,代表此單元格水平延伸的單元格數
rowspan:垂直方向延伸單元格,值為一正整數,代表此單元格垂直延伸的單元格數。

設置跨多列的表格:

設置跨多行的表格:

設置跨多行多列的表格:

注意:

跨行和跨列都是寫在<td>標簽里面。

6、表格的分組標簽

表格分組如下圖所示:

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格</title>
</head>
<body>
    <table width="100%" cellspacing="0" cellpadding="0" border="1">
        <caption>年終數據報表</caption>
        <thead bgcolor="#99FFFF">
            <tr>
                <th>月份</th>
                <th>收入</th>
            </tr>
        </thead>
        <tbody bgcolor="#009966">
            <tr>
                <td>1月</td>
                <td>100</td>
            </tr>
            <tr>
                <td>2月</td>
                <td>80</td>
            </tr>
            <tr>
                <td>3月</td>
                <td>300</td>
            </tr>
            <tr>
                <td>4月</td>
                <td>400</td>
            </tr>
            <tr>
                <td>5月</td>
                <td>100</td>
            </tr>
            <tr>
                <td>6月</td>
                <td>200</td>
            </tr>
        </tbody>
        <tfoot bgcolor="#FFFF00">
            <tr>
                <td>平均月收入</td>
                <td>196.67</td>
            </tr>
            <tr>
                <td>總計</td>
                <td>1180</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

結果:

到此這篇關于HTML表格元素的文章就介紹到這了。希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • 詳解HTML表格

    這篇文章主要介紹了HTML表格,包括表格的作用布局及格式問題,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-07-31
  • 詳解html中表格table的行列合并問題解決

    這篇文章主要介紹了詳解html中表格table的行列合并問題解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來
    2020-07-28
  • HTML頁面自適應寬度的table(表格)

    這篇文章主要介紹了HTML頁面自適應寬度的table(表格),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習
    2020-06-16
  • html做表格只顯示表格的外邊框

    這篇文章主要介紹了html做表格只顯示表格的外邊框,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-12-20
  • html 表格單元格的寬度和高度的設置方法

    做網頁的時候,經常會碰到表格寬度對不齊的問題,遇到這種問題怎么處理呢?下面小編給大家介紹下html 表格單元格的寬度和高度的設置方法,一起看看吧
    2018-08-09
  • html中table表格的內容水平和垂直居中顯示

    這篇文章主要介紹了html中table表格的內容水平和垂直居中顯示的相關資料,需要的朋友可以參考下
    2017-03-27
  • HTML中table表格標簽的基礎學習教程

    用table標簽在Web上顯示表格內容是HTML所具有的最基本功能之一,這里我們就來看一下HTML中table表格標簽的基礎學習教程,需要的朋友可以參考下
    2016-07-08
  • HTML表格布局實例講解

    這篇文章主要為大家詳細介紹了HTML表格布局簡單實例,HTML表格布局是HTML入門學習中的基礎知識,感興趣的小伙伴們可以參考一下
    2016-05-05
  • HTML表格布局實際使用詳解

    這篇文章主要介紹了HTML表格布局實際使用詳解,是HTML入門學習中的基礎知識,需要的朋友可以參考下
    2015-07-28
  • html之簡單網頁表格制作示例介紹

    本文為大家介紹下html的網頁元素的基本知識,以一個簡單的網頁表格示例為大家演示下,需要了解的朋友可以參考下哈
    2013-08-05

最新評論

免费人成视频在线观看