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 相关文章推荐
纯HTML+CSS3制作导航菜单(附源码)
Apr 24 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
Jul 11 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
Jul 04 HTML / CSS
HTML5实现音频和视频嵌入的方法
Aug 22 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
Feb 20 HTML / CSS
HTML5拖放API实现自动生成相框功能
Apr 07 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
Jun 03 HTML / CSS
详解CSS玩转图片Base64编码
May 25 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 12 HTML / CSS
HTML基本元素标签介绍
使用CSS连接数据库的方式
css常用字体属性与背景属性介绍
分享CSS盒子模型隐藏的几种方式
Feb 28 #HTML / CSS
CSS中实现动画效果-附案例
css filter和getUserMedia的联合使用
Feb 24 #HTML / CSS
css3中2D转换之有趣的transform形变效果
You might like
php数组中包含中文的排序方法
2014/06/03 PHP
php中使用GD库做验证码
2016/03/31 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
Jquery 常用方法经典总结
2010/01/28 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
Node.js websocket使用socket.io库实现实时聊天室
2017/02/20 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
iview form清除校验状态的实现
2019/09/19 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
Vue实现简易计算器
2020/02/25 Javascript
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
编程语言Python的发展史
2014/09/26 Python
python的类方法和静态方法
2014/12/13 Python
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
Python如何安装第三方模块
2020/05/28 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
如何执行一个shell程序
2012/11/23 面试题
2015年银行工作总结范文
2015/04/01 职场文书
退休欢送会致辞
2015/07/31 职场文书
感恩老师主题班会
2015/08/12 职场文书
2016公司新年问候语
2015/11/11 职场文书
用Python将库打包发布到pypi
2021/04/13 Python