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

一、表格的基本结构

表格的基本语法:
<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(二):表格元素的更多相关文章

  1. 第六十三节,html表格元素

    html表格元素 学习要点:     1.表格元素总汇     2.构建表格解析     本章主要探讨HTML5中表格元素的用法.表格的主要用途是以网格的形式显示二维数据. 一.表格元素总汇     ...

  2. html/css 表格元素以及表格布局

    一,html之表格 1,一个完整的html表格所包含的元素 <!--一个完整的html表格--> <!--cellpadding代表单元格内的文字和单元格边框之间的间距--> ...

  3. HTML表格元素

      学习要点:     1.表格元素总汇     2.构建表格解析 一.表格元素总汇     表格的基本构成最少需要三个元素:<table>.<tr>.<td>,其 ...

  4. html中表格元素的相关总结

    表格元素相关总结: 1.在CSS中,内部表元素(如td.tr.col等)生成矩形框,这些矩形框包含内容.内边距和边框,但没有外边距,因此如果定义外边距,浏览器将忽略该定义:对于table元素,外边距有 ...

  5. HTML中表格元素TABLE,TR,TD及属性的语法

    table:表格元素及属性 <table width="80%" border="1" cellspacing="1" cellpad ...

  6. html5权威指南:表格元素

    第十一章:表格元素                                                                                           ...

  7. html5之表格元素

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法(点击后弹窗效果以及去掉效果)

    DOM访问列表框.下拉菜单的常用属性: form.length.options.selectedindex.type       使用options[index]返回具体选项所对应的常用属性:defa ...

  9. HTML的表格元素

    一.HTML的表格元素 1.table元素 <table> 标签定义 HTML 表格.简单的 HTML 表格由 table 元素以及一个或多个 tr.th 或 td 元素组成.tr 元素定 ...

随机推荐

  1. RabbitMQ消息队列(六):使用主题进行消息分发[转]

    在上篇文章RabbitMQ消息队列(五):Routing 消息路由 中,我们实现了一个简单的日志系统.Consumer可以监听不同severity(严重级别)的log.但是,这也是它之所以叫做简单日志 ...

  2. c#基础之异常处理及自定义异常 从SQLServer转储数据到MySQL

    c#基础之异常处理及自定义异常 一.什么是c#中的异常? 异常是程序运行中发生的错误,异常处理是程序的一部分.c#中的异常类主要是直接或者间接的派生于 System.Exception类 ,也就是说S ...

  3. 通俗易懂,C#如何安全、高效地玩转任何种类的内存之Span的脾气秉性(二)。 异步委托 微信小程序支付证书及SSL证书使用 SqlServer无备份下误删数据恢复 把list集合的内容写入到Xml中,通过XmlDocument方式写入Xml文件中 通过XDocument方式把List写入Xml文件

    通俗易懂,C#如何安全.高效地玩转任何种类的内存之Span的脾气秉性(二).   前言 读完上篇<通俗易懂,C#如何安全.高效地玩转任何种类的内存之Span的本质(一).>,相信大家对sp ...

  4. 摘:分配和释放BSTR的内存

    当您创建 BSTR的并将它们使用以避免内存泄漏的它们在COM对象之间时,必须注意在将内存的.       当 BSTR 在接口中保持,必须释放其内存,当处理它.       但是,那么,当 BSTR ...

  5. Ext4文件系统架构分析(三)

    ioctl源码分析之交换两个文件的物理extents 1. 交换两个文件的extents Ext4 的EXT4_IOC_MOVE_EXT命令用于交换两个文件的extents,实际上是交换两个文件的对应 ...

  6. appium +uiautomator2 遇到 deviceName can't be blank 提示的解决

    为了获取android toast ,需要升级selenium 到 3.4.0 和appium 5.0.0-BETA9 到最新版本,并在启动代码前面追加一行代码: capabilities.setCa ...

  7. MongoDB查询指定字段(field)返回指定字段的方法

    使用MongoDB的时候需要只查询指定的字段进行返回,也就是类似mysql里面的 SELECT id,name,age 这样而不是SELECT *.在MongoDB里面映射(projection)声明 ...

  8. Windows上怎么安装ELK

    In this guide I will show that it is also possible to run Logstash on a Windows Server 2012 machine ...

  9. angular学习笔记(十三)

    本篇主要介绍控制器的$scope中的数据是如何被改变的: 以下三种方法,都可以改变$scope中的number值: 1. 表达式: <span ng-click="number=num ...

  10. vue中sass的配置安装流程

    1.安装node-sass,因为scss是基于此库的 cnpm install --save-dev node-sass 2.安装sass-loader cnpm install --save-dev ...