HTML+CSS基础入门-第六天（HTML-表格）

r囧r小猫 2022-09-30 15:42 170阅读 0赞

# 基本格式 #

# table标记的属性 #

## width属性 ##

表示表格的宽度，他的属性值可以使像素（px）也可以是父级元素的百分比（%）

## height属性 ##

表示表格的高度，他的属性值可以使像素（px）也可以是父级元素的百分比（%）

## border属性 ##

表示表格外边框的的宽度

## align属性 ##

表格显示的位置

### 属性值 ###

*  left：居左显示
 *  center：居中显示
 *  right：居右显示

## cellspacing属性 ##

单元格之间的距离 默认是2px 单位是像素

## cellpadding ##

单元格距离与单元格边框的显示的距离，单位像素

## frame属性 ##

控制单元格表格边框最外层的四条线框

### 属性值 ###

*  void：默认值，表示无边框
 *  above：表示仅顶部有边框
 *  below：表示仅底部有边框
 *  hsides：表示仅底部和顶部有边框
 *  lhs：表示仅左侧有边框
 *  rhs：表示仅右侧有边框
 *  vsides：表示仅右侧和左侧有边框
 *  box：包含全部四个边框
 *  border：包含全部四个边框

## rules属性 ##

控制是否显示单元格之间的分割线

### 属性值 ###

*  none：默认值，鄙视无分割线
 *  all：表示包括所有的分割线
 *  rows：表示仅有行分割线
 *  clos：表示仅有列分割线
 *  groups：表示仅在行组和列组之间有分割线

## 代码 ##

## 显示结果 ##

![6-1][]

# caption标记 #

## 什么时候使用 ##

如果表格需要使用标题，那么就可以使用此标记

## 如何正确使用 ##

<caption>属性的插入位置，直接位于<table>属性之后，<tr>表格行之前。

## align属性 ##

### 属性值 ###

*  top：标题放在表格的上部
 *  bottom：标题挡在表格的下部
 *  left：标题放在表格的左部
 *  right：标题放在表格的右部

## 代码 ##

<body>
            <table width="960sp" height="200sp" border="1" align="center" cellspacing="0px" cellpadding="5sp" frame="box" rules="all" >
            <caption align="bottom">一年一班成员表</caption>
                <tr>
                    <th>班级</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>成绩</th>
                </tr>
                <tr>
                    <td>一年一班</td>
                    <td>23</td>
                    <td>女</td>
                    <td>123</td>
                </tr>
                <tr>
                    <td>一年一班</td>
                    <td>12</td>
                    <td>女</td>
                    <td>123</td>
                </tr>
                <tr>
                    <td>一年一班</td>
                    <td>13</td>
                    <td>男</td>
                    <td>123</td>
                </tr>
            </table>
        </body>

## 显示结果 ##

![6-2][]

# tr标记 #

定义表格的每一行，对于每一个表格行，都是由一对<tr></tr>标记表示，每一行<tr>标记内也可以嵌套多个<td>或者<th>标记

## bgcolor属性 ##

设置背景颜色

## align属性 ##

设置垂直方向对齐方式

### 属性值 ###

*  bottom：靠底部对齐
 *  top：靠顶部对齐
 *  middle：居中对齐

## valign属性 ##

设置水平方向对齐方式

### 属性值 ###

*  left：靠左齐
 *  right：靠右齐
 *  center：居中对齐

## 代码 ##

<body>
            <table width="960sp" height="300sp" border="1" align="center" cellspacing="0px" cellpadding="5sp" frame="box" rules="all" >
            <caption align="bottom">一年一班成员表</caption>
                <tr bgcolor="#ccc">
                    <th>班级</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>成绩</th>
                </tr>
                <tr align="middle">
                    <td>一年一班</td>
                    <td>23</td>
                    <td>女</td>
                    <td>123</td>
                </tr>
                <tr > 
                    <td>一年一班</td>
                    <td>12</td>
                    <td>女</td>
                    <td>123</td>
                </tr>
                <tr >
                    <td>一年一班</td>
                    <td>13</td>
                    <td>男</td>
                    <td>123</td>
                </tr>
            </table>
        </body>

## 显示结果 ##

![6-3][]

# td和th标记 #

## 两者的区别 ##

*  <th>和<td>都是单元格标记，起必须乔涛在<tr>标签内，是成对出现的
 *  <th>是表头标记，通畅位于首行或者首列，<th>中的文字会默认加粗，而<td>不会
 *  <td>是数据标记，表示该单元格的具体数据

## 共同之处 ##

两者标记的属性都是一样的

## 属性 ##

*  bgcolor：设置单元格背景
 *  align：设置单元格对齐方式
 *  valign：设置单元格垂直对齐方式
 *  width：设置单元格宽度
 *  height：设置单元格高度
 *  rowspan：设置单元格所占行数
 *  colspan：设置单元格所占列数

# 参考代码 #

<html>
        <head>
            <title> 表格课</title>
            <meta charset="UTF-8">
    
        </head>
        <body>
            <table width="960" height="300" border="1" align="center" cellpadding="20" cellspacing="1" frame="box" rules="all">
                <caption align="bottom">表格的标题</caption>
                <tr bgcolor="#ccc" >
                    <th bgcolor="red" align="left" width="100" rowspan="2" colspan="2">班级</th>
                    <th>年龄</th>
                    <th>姓名</th>
                    <th>成绩</th>
                </tr>
                <tr>
                    <td>一班</td>
                    <td>16</td>
                    <td>离散</td>
                    <td>100</td>
                </tr>
                <tr>
                    <td>一班</td>
                    <td>16</td>
                    <td>离散</td>
                    <td>100</td>
                </tr>
                <tr>
                    <td>一班</td>
                    <td>16</td>
                    <td>离散</td>
                    <td>100</td>
                </tr>
                <tr>
                    <td>一班</td>
                    <td>16</td>
                    <td>离散</td>
                    <td>100</td>
                </tr>
            </table>
        </body>
    </html>

[6-1]: /images/20220705/9558910a2fd14144a39578fa23363914.png
[6-2]: /images/20220705/1547debe0c7e49648faa253ec7e5217a.png
[6-3]: /images/20220705/a0816d5a48b54dfbb8532cc1383b622f.png