HTML（二）：表格元素

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

一、表格的基本结构

表格的基本语法:
<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"> </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（二）：表格元素的更多相关文章

第六十三节，html表格元素
html表格元素学习要点: 1.表格元素总汇 2.构建表格解析本章主要探讨HTML5中表格元素的用法.表格的主要用途是以网格的形式显示二维数据. 一．表格元素总汇 ...
html/css 表格元素以及表格布局
一,html之表格 1,一个完整的html表格所包含的元素   ...
HTML表格元素
学习要点: 1.表格元素总汇 2.构建表格解析一．表格元素总汇表格的基本构成最少需要三个元素:<table>.<tr>.<td>,其 ...
html中表格元素的相关总结
表格元素相关总结: 1.在CSS中,内部表元素(如td.tr.col等)生成矩形框,这些矩形框包含内容.内边距和边框,但没有外边距,因此如果定义外边距,浏览器将忽略该定义:对于table元素,外边距有 ...
HTML中表格元素TABLE,TR,TD及属性的语法
table:表格元素及属性 <table width="80%" border="1" cellspacing="1" cellpad ...
html5权威指南：表格元素
第十一章:表格元素 ...
html5之表格元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、对表格操作、通用性和标准的事件监听方法（点击后弹窗效果以及去掉效果）
DOM访问列表框.下拉菜单的常用属性: form.length.options.selectedindex.type 使用options[index]返回具体选项所对应的常用属性:defa ...
HTML的表格元素
一.HTML的表格元素 1.table元素 <table> 标签定义 HTML 表格.简单的 HTML 表格由 table 元素以及一个或多个 tr.th 或 td 元素组成.tr 元素定 ...

随机推荐

eclipse 在Servers窗口创建一个Tomcat 6.0 Server失败
web项目部署到tomcat除了用eclipse插件,eclipse也有一个Servers窗口来部署. 问题背景:Servers窗口,我之前创建过一个Tomcat v6.0 Server,后来我把 ...
Spring.net(一)----Spring.NET框架简介及模块说明
简介: Spring.NET框架包括很多功能,Spring.NET 1.0包括完整的IoC容器和AOP类库.1.1版加入Web.ORM和数据模块.Spring.NET的下载包中并不包含与其它类库 ...
Linux内核(12) - 子系统的初始化之那些入口函数
内核选项的解析完成之后,各个子系统的初始化即进入第二部分—入口函数的调用.通常USB.PCI这样的子系统都会有一个名为subsys_initcall的入口,如果你选择它们作为研究内核的切入点,那么就请 ...
ASP.NET Helper
php序列化与反序列化时字符集不一致问题的解决办法
今天的用PHP的时候无意的出现了用unserialize()函数转换老是返回false,我确认我的字符串是没错的,测试了很多次还是一样,没办法,启用了error_reporting(E_ALL)启用错 ...
Spring Hello World
1. 概述 Spring 框架是一个开源的 Java 平台,它最初是由 Rod Johnson 编写的,并且于 2003 年 6 月首次在 Apache 2.0 许可下发布. 1.1 依赖注入 1.2 ...
ISE约束文件*.ucf的写法
之前一直相不明白,为什么从官网下载的AC97的IP不能跑起来,整个IP就像空壳一样,bit_clk输进去,没有任何信号输出来.从IP的RTL来看,即使是IP不连到CPU的BUS上,只要是综合进FPGA ...
man手册语法格式
Linux命令很多,但对格式本身解读的文章几乎是空白,都在凭对格式的猜测来写命令,就此在网上搜集此类资料都很少而且很不全面,想找官方的,也没找到.根据自己的理解写一篇出来,希望对初学者有用. 一. ...
Serviceability
http://hg.openjdk.java.net/jdk7u/jdk7u2/hotspot/file/6259c6d3bbb7/agent/doc/clhsdb.html http://blog. ...
每日英语：Why Are Items Pricier in China?
In China, consumers pay nearly $1 more for a latte at Starbucks than their U.S. counterparts. A Cadi ...

HTML（二）：表格元素

HTML（二）：表格元素的更多相关文章

随机推荐

热门专题