表格的使用

1.表格的使用(之前用来做网页布局的 现在只用来做数据展示)

表格的标签名称

- table 表示表格

- tr 表示表格中的行

- td 表格表格中的列(行与列相交部分的单元格)

2.表格的基本属性

1.width/height/border

2.bordercolor/bgcolor 边框的颜色/表格的背景颜色

3. cellspacing 单元格与单元格之间的间距

4.cellpadding：内容与单元格之间的距离

- cell 细胞、单元格

- space 空间

- padding 内边距

5.bgcolor：背景颜色

6.bordercolor：边框的颜色

7.设置字体：font-size：20px；====利用css样式

8.th标签：自带加粗与居中效果，一般用在表格的第一行

9.rules属性===写在table上的，专门用来化线的，规定画哪种类型的线

        取值：①取值：rows==只有横向的线

                   ②取值：cols==绘制纵向的线

                  ③取值：all==绘制横线与竖线

                ④取值：groups===按照组划线====前提：必须分组

  问题：如何分组
① 按照行分组

                1.thead==只能使用一次==表格的头部区域

                2.tbody==可以使用多次===表格的身体区域

                3.tfoot==只能使用一次===表格的尾部区域

                注意：如果不分组，浏览器会把所有的东西会自动放在一个tbody中

②按照列分组

<colgroup span=“数字”><colgroup>==数字是几安几列分组

10.表格的标题标签：caption

3.对齐方式

- 水平方向 align:left right center

- 垂直方向 valign:top bottom middle

- 难点:行列合并

- 列合并 colspan

- 行合并 rowspan

- span作为属性出现的时候表示选中几个 行列合并的属性值要是一个数字

4.表格中的高级属性及标签

①- 数据的行分组

- tbody 默认会生成一次 包裹住表格中的所有内容 无数个

- thead/tfoot 表格的头部和底部 成双成对 只有一个

②- 数据的列分组

- 单标签 col

- 双标签 colgroup

③- 属性:

- span 选择几个列

- width 控制这几个列的宽度

- 表格的列标题：th 默认字体是加粗并且居中显示

- 表格标题：caption

④tr的属性
        1.height====单独调整某一行的高度
        2.bgcolor===当都调整某一行的背景颜色
        3.align====调整某一行的内容水平对齐方式
            left、center、right
        4.valign===调整某一行的内容垂直对齐方式
            top、center、bottom

⑤td上的属性：
        1.width：设置⼀个单元格的宽度，会影响这个单元格⼀整列的宽度。
        2.height：设置⼀个单元格的⾼度，会影响这个单元格所在的⼀整⾏的⾼度。
        3.bgcolor:单独调整这一个格子的背景颜色
        4.align：某一个单元格内容的水平对齐方式
        5.valign：某一个单元格内容的垂直对齐方式
        6.行合并rowspan（横着的线不见）
        7.列合并colspan（竖着的线不见了）

5.表格的css样式语句
    1.border-spacing=====格子与格子的间距
    2.border-collapse: collapse;=====合并相邻的边框线（画细线表格）
    3.table-layout: fixed;表格单元格的固定（能实现格子宽度均分的效果）
        表格的宽度分配原则：
        根据内容自行分配，如果内容多，就多分一点，少，就少分一点
    4.empty-cells:空格⼦显示⽅式。
        hide：隐藏
        show：显示（默认值）

body>
    <!-- 三行三列的表格 -->
    <!-- table>tr*3>td*3 -->
    <table width="300" height="300" border="1" cellspacing="0" cellpadding="10" rules="groups">
        <caption>统计表</caption>
        <colspan="2" width="50"> <!-- 列合并 -->
        <thead>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
        </tfoot>
    </table>
</body>

效果图

：