首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

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中的表格元素介绍

- Author -

.NET开发菜鸟

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3制作翻转效果_动力节点Java学院整理
Jul 11 HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
css3.0 图形构成实例练习一
Mar 19 HTML / CSS
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 HTML / CSS
多重CSS背景动画实现方法示例
Apr 04 HTML / CSS
CSS3 @media的基本用法总结
Sep 10 HTML / CSS
HTML5 实现一个访问本地文件的实例
Dec 13 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
Jan 30 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
Aug 02 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
Mar 14 HTML / CSS
浅析HTML5：'data-'属性的作用
Jan 23 HTML / CSS
HTML基本元素标签介绍
使用CSS连接数据库的方式
css常用字体属性与背景属性介绍
分享CSS盒子模型隐藏的几种方式
Feb 28 #HTML / CSS
CSS中实现动画效果-附案例
css filter和getUserMedia的联合使用
Feb 24 #HTML / CSS
css3中2D转换之有趣的transform形变效果
推荐信(292) 创业计划书(312) SOA面试题(9) 岗位职责(1324) 自我鉴定(671) 自荐信(981) 求职信(1029) Delphi面试题(13) 自我评价(886) Ruby面试题(15)
You might like
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
PHP针对字符串开头和结尾的判断方法
2016/07/11 PHP
JavaScript this调用规则说明
2010/03/08 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
情人节之礼 js项链效果
2012/02/13 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
2012/02/27 Javascript
JS鼠标滑过图片时切换图片实现思路
2013/09/12 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
javascript每日必学之封装
2016/02/23 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
react 创建单例组件的方法
2018/04/26 Javascript
vue element项目引入icon图标的方法
2018/06/06 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
numpy返回array中元素的index方法
2018/06/27 Python
在Python中增加和插入元素的示例
2018/11/01 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
python requests.get带header
2020/05/05 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
keras输出预测值和真实值方式
2020/06/27 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
The North Face北面英国官网：美国著名户外品牌
2017/12/13 全球购物
Expedia法国：全球最大在线旅游公司
2018/09/30 全球购物
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
会计顶岗实习心得
2014/01/25 职场文书
小学教学工作总结2015
2015/05/13 职场文书
小程序后台PHP版本部署运行 LNMP+WNMP
2021/04/01 Servers
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle