表格元素table

源码下载

本节课讲解table标签，类似excel的表格效果，如果设计页面遇到统计表类的数据，使用table标签。

代码解析

1.table、tr、td标签

首先使用标签table、tr、td完成如下内容,table标签可以理解为告诉浏览器下面是一个表格块元素，在table父标签里面嵌套tr子标签来创建表格的一行，tr元素会自动换行，然后在tr标签里面嵌入td标签它用来创建一个表格单元，在td的开始标签、结束标签里面可以添加文字、图片或嵌入其他的元素。tr是英文词组table row的首字母缩写，row本身就是行的意思。

<table>
    <tr>
        <td>标签</td>
        <td>含义</td>
        <td>分类</td>
    </tr>
    <tr>
        <td>table</td>
        <td>最外层标签</td>
        <td>闭合标签</td>
    </tr>
    <tr>
        <td>tr</td>
        <td>创建行</td>
        <td>闭合标签</td>
    </tr>
    <tr>
        <td>th</td>
        <td>创建表格单元(表头)</td>
        <td>闭合标签</td>
    </tr>
    <tr>
        <td>td</td>
        <td>创建表格单元(内容)</td>
        <td>闭合标签</td>
    </tr>
</table>

2.th标签

把上面代码中的第一个tr标签里面的td标签替换为th标签，th标签也是用来创建一个单元格，这一点和td一样，区别在于语义化方面，一般每一个表格都有表头，th特指表头的单元格。

 <tr>
        <th>标签</th>
        <th>含义</th>
        <th>分类</th>
 </tr>

3.table属性

前面两步完成了内容的创建，元素的属性可以通过全部元素通用的style属性，也可以是一些元素独有的显示效果，比如table元素的frame属性和rules属性用来设置表格的内外边框显示。当frame属性值是box显示表格的上下左右四个外边线，属性值是above时，只显示边框的上面一条线；rules属性值是all时，表格所有的行和列都会被线条分割开来。

<table frame="box" rules="all">

4.style边框属性

把frame="box"属性设置删除替换为style="border: 1px solid black"，你会发现与原来的效果一样。所有的块元素都具有style属性中的border边框属性，通过border可以设置边框的粗细、颜色，前面说过能用CSS样式属性style实现的，尽量不用元素自身用于外观样式的属性。border属性的三个值依次书写，空格间隔开，以后会遇到很多这种写法，1px表示线宽是一个像素，solid顾名思义是实线，那也就是说有其他虚线等样式线条，black定义线条颜色，当然你也可以自定义颜色，可以用十六进制的写法，也可以使用颜色对象的英文单词书写。

<table rules="all" style="border: 1px solid black">

table属性frame

属性frame的作用是根据属性值不同，控制外边框的隐藏与现实。属性frame常用的属性值是代表显示外边框box，代表不显示外边框void，其他虽然不常用，也会列举出来，并不是需要大家记忆，而是有个印象，突然某天用到了，知道去查一下，如果你在搜索框里都不知道输入哪些名词描述自己的问题，那肯定很难找到准确答案。

值	含义
box	完整显示外边框
void	不显示外边框
above	显示边框的上边线
below	显示边框的下边线
lhs	显示边框的左边线
rhs	显示边框的右边线
hsides	显示边框的上下边线
vsides	显示边框的左右边线

table属性rules

属性rules主要作用是控制表格内部分割线的显示

位于行之间的线条。位于列之间的线条。

值	含义
none	不显示
all	行列全部分割线条
rows	每一行的分割线
cols	每一列的分割线

标签	含义	分类
table	最外层标签	闭合标签
tr	创建行	闭合标签
th	创建表格单元(表头)	闭合标签
td	创建表格单元(内容)	闭合标签