欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML中的表格元素介紹

  發(fā)布時(shí)間：2022-02-26 15:39:59   作者：.NET開(kāi)發(fā)菜鳥(niǎo)   我要評(píng)論
這篇文章介紹了HTML中的表格元素，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

表格元素的作用：用來(lái)格式化顯示數(shù)據(jù)。

一、表格的基本結(jié)構(gòu)

表格的基本語(yǔ)法:

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

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

示例：

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

<caption>表格的題注：caption元素必須包含在table元素中，而且必須緊跟在<table>的開(kāi)始標(biāo)記之后，默認(rèn)居中顯示。

語(yǔ)法
開(kāi)始標(biāo)記：必須
內(nèi)容：行內(nèi)標(biāo)記
結(jié)束標(biāo)記：必需
主要屬性：
align屬性：用以確定題注的位置，可以有五種取值
bottom、center、laft、right、top

例如：定義一個(gè)基本的表格

<!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>

結(jié)果：

二、表格美化

1、設(shè)置表格的尺寸和邊框

width:用來(lái)設(shè)置表格的寬度
height:用來(lái)設(shè)置表格的高度
border：用來(lái)設(shè)置表格邊框尺寸大小
bordercolor：用來(lái)設(shè)置表格邊框顏色

<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">辦公設(shè)置、文具、耗材</td>
    </tr>
    <tr>
      <td>惠普</td>
   <td>華碩</td>
   <td>打印機(jī)</td>
   <td>刻錄盤</td>
    </tr>
 </table>

示例：

2、設(shè)置背景圖片和背景色

background：屬性用來(lái)設(shè)置表格的背景圖片
bgcolor：屬性用來(lái)設(shè)置表格、行、列的背景色。“#EBEFFF”是用RGB表示的一種顏色值，RGB指的是紅綠藍(lán)

<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">辦公設(shè)備、文具、耗材</td>
    </tr>
    <tr>
       <td>IBM</td>
    <td>惠普</td>
    <td>華碩</td>
    <td>打印機(jī)</td>
    <td>刻錄盤</td>
    <td>墨盒</td>
    </tr>
 </table>

示例：

3、設(shè)置對(duì)齊方式

align：屬性用來(lái)設(shè)置表格、行、列的對(duì)齊方式。

有三種取值

  • left：居左對(duì)齊 默認(rèn)
  • right：居右對(duì)齊
  • center：居中對(duì)齊

示例：

4、填充屬性和間距屬性

cellpadding:單元格填充，用來(lái)設(shè)置表格內(nèi)填充距離，表示每一個(gè)單元格的厚度，值越大，單元格內(nèi)容離單元格距離就越大
cellspacing:單元格間距，用來(lái)設(shè)置表格內(nèi)框?qū)挾?表示兩個(gè)單元格之間的距離。值越大，單元格與單元格之間的距離就越大

填充屬性和間距屬性：

<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">辦公設(shè)備、文具、耗材</td>
   </tr>
   <tr>
     <td>惠普</td>
  <td>華碩</td>
  <td>打印機(jī)</td>
  <td>刻錄盤</td>
   </tr>
 </table>
 </body>

示例：

設(shè)置表格的填充屬性示例：

5、設(shè)置跨行、跨列的表格

colspan：水平方向延伸單元格，值為一正整數(shù)，代表此單元格水平延伸的單元格數(shù)
rowspan：垂直方向延伸單元格，值為一正整數(shù)，代表此單元格垂直延伸的單元格數(shù)。

設(shè)置跨多列的表格：

設(shè)置跨多行的表格：

設(shè)置跨多行多列的表格：

注意：

跨行和跨列都是寫在<td>標(biāo)簽里面。

6、表格的分組標(biāo)簽

表格分組如下圖所示：

例如：

<!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>年終數(shù)據(jù)報(bào)表</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>總計(jì)</td>
                <td>1180</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

結(jié)果：

到此這篇關(guān)于HTML表格元素的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 詳解HTML表格

    這篇文章主要介紹了HTML表格,包括表格的作用布局及格式問(wèn)題，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-07-31

  • 詳解html中表格table的行列合并問(wèn)題解決

    這篇文章主要介紹了詳解html中表格table的行列合并問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)
    2020-07-28

  • HTML頁(yè)面自適應(yīng)寬度的table(表格)

    這篇文章主要介紹了HTML頁(yè)面自適應(yīng)寬度的table(表格),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)
    2020-06-16

  • html做表格只顯示表格的外邊框

    這篇文章主要介紹了html做表格只顯示表格的外邊框，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-12-20

  • html 表格單元格的寬度和高度的設(shè)置方法

    做網(wǎng)頁(yè)的時(shí)候，經(jīng)常會(huì)碰到表格寬度對(duì)不齊的問(wèn)題，遇到這種問(wèn)題怎么處理呢？下面小編給大家介紹下html 表格單元格的寬度和高度的設(shè)置方法，一起看看吧
    2018-08-09

  • html中table表格的內(nèi)容水平和垂直居中顯示

    這篇文章主要介紹了html中table表格的內(nèi)容水平和垂直居中顯示的相關(guān)資料,需要的朋友可以參考下
    2017-03-27

  • HTML中table表格標(biāo)簽的基礎(chǔ)學(xué)習(xí)教程

    用table標(biāo)簽在Web上顯示表格內(nèi)容是HTML所具有的最基本功能之一,這里我們就來(lái)看一下HTML中table表格標(biāo)簽的基礎(chǔ)學(xué)習(xí)教程,需要的朋友可以參考下
    2016-07-08

  • HTML表格布局實(shí)例講解

    這篇文章主要為大家詳細(xì)介紹了HTML表格布局簡(jiǎn)單實(shí)例，HTML表格布局是HTML入門學(xué)習(xí)中的基礎(chǔ)知識(shí)，感興趣的小伙伴們可以參考一下
    2016-05-05

  • HTML表格布局實(shí)際使用詳解

    這篇文章主要介紹了HTML表格布局實(shí)際使用詳解,是HTML入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下
    2015-07-28

  • html之簡(jiǎn)單網(wǎng)頁(yè)表格制作示例介紹

    本文為大家介紹下html的網(wǎng)頁(yè)元素的基本知識(shí)，以一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)表格示例為大家演示下，需要了解的朋友可以參考下哈
    2013-08-05

最新評(píng)論