HTML中的表格元素介绍


Posted in HTML / CSS onFebruary 28, 2022

表格元素的作用:用来格式化显示数据。

一、表格的基本结构

HTML中的表格元素介绍

表格的基本语法:

<TABLE border="设置表格边框尺寸大小" width="" cellpadding="" cellspaning="">
   <TR align="对齐方式">
      <TD align="">
         单元格内容
      </TD>
      ......
   </TR>
   ......
</TABLE>

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

示例:

HTML中的表格元素介绍

主要属性:
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>

结果:

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>

示例:

HTML中的表格元素介绍

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>

示例:

HTML中的表格元素介绍

3、设置对齐方式

align:属性用来设置表格、行、列的对齐方式。

有三种取值

  • left:居左对齐 默认
  • right:居右对齐
  • center:居中对齐

示例:

HTML中的表格元素介绍

4、填充属性和间距属性

cellpadding:单元格填充,用来设置表格内填充距离,表示每一个单元格的厚度,值越大,单元格内容离单元格距离就越大
cellspacing:单元格间距,用来设置表格内框宽度,表示两个单元格之间的距离。值越大,单元格与单元格之间的距离就越大

填充属性和间距属性:

HTML中的表格元素介绍

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

示例:

HTML中的表格元素介绍

设置表格的填充属性示例:

HTML中的表格元素介绍

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

colspan:水平方向延伸单元格,值为一正整数,代表此单元格水平延伸的单元格数
rowspan:垂直方向延伸单元格,值为一正整数,代表此单元格垂直延伸的单元格数。

设置跨多列的表格:

HTML中的表格元素介绍

设置跨多行的表格:

HTML中的表格元素介绍

设置跨多行多列的表格:

HTML中的表格元素介绍

注意:

跨行和跨列都是写在<td>标签里面。

6、表格的分组标签

表格分组如下图所示:

HTML中的表格元素介绍

例如:

<!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 / CSS 相关文章推荐
CSS3样式linear-gradient的使用实例
Jan 16 HTML / CSS
CSS3中31种选择器使用方法教程
Dec 05 HTML / CSS
纯CSS实现设置半个字符的样式
Jul 03 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 HTML / CSS
HTML5样式控制示例代码
Nov 27 HTML / CSS
html5适合移动应用开发的12大特性
Mar 19 HTML / CSS
HTML5 Canvas的事件处理介绍
Apr 24 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 HTML / CSS
10个最常见的HTML5面试题 附答案
Jun 06 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
May 21 HTML / CSS
HTML基本元素标签介绍
使用CSS连接数据库的方式
css常用字体属性与背景属性介绍
分享CSS盒子模型隐藏的几种方式
Feb 28 #HTML / CSS
CSS中实现动画效果-附案例
css filter和getUserMedia的联合使用
Feb 24 #HTML / CSS
css3中2D转换之有趣的transform形变效果
You might like
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
动态加载iframe
2006/06/16 Javascript
插件:检测javascript的内存泄漏
2007/03/04 Javascript
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
使用js画图之画切线
2015/01/12 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
关于Python数据结构中字典的心得
2017/12/04 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
python里 super类的工作原理详解
2019/06/19 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
Python Django路径配置实现过程解析
2020/11/05 Python
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
函授生自我鉴定
2014/03/25 职场文书
团支书竞选演讲稿
2014/04/28 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
APP界面设计技巧和注意事项
2022/04/29 杂记
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript