HTML 自学笔记（HTML表格相关标记）

HTML表格相关标记

表格的基本属性及结构

基本属性：

1. 1. <table>
  2. <caption>
  3. <tr>
  4. <td>和<th>属性
  5. <thead>定义表格的页眉
  6. <tfoot>定义表格的页脚

table基本格式：<table>属性1="属性值1" 属性2="属性值2" 属性3="属性值3">表格内容</table>

1. table属性
  1. width 表格的宽度，值包括：px、相对于父元素的%
  2. height 表格的高度，值包括：px、相对于父元素的%
  3. border 表格外边框的宽度，值包括：px
  4. align 定义表格的位置，left居左 right居右 center居中。默认值left
  5. cellspacing 单元格之间的距离，默认是2px，单位px
  6. cellpadding 单元格内容与单元格边框的显示距离。单位px
  7. fram 控制表格边框最外层的四条线框
    1. void（默认）无边框
    2. above 仅顶部边框
    3. below 仅底部边框
    4. hsides 仅顶部和底部有边框
    5. ihs 仅左侧边框
    6. ris 仅右侧边框
    7. vsides 左右侧边框
    8. box 全部4个边框
    9. border 包含全部4个边框
2. rules 控制是否显示以及如何显示单元格之间的分割线
  1. 1. none（默认）表示无分割线
    2. all 表示包括所有分割线
    3. rows 表示仅有行分割线
    4. clos 表示仅有列分割线
    5. groups 表示仅在行组和列组之间有分割线
3. <tr>标记定义表格的一行，对于每一个表格行，都由一对<tr>...</tr>标记表示每一行，<tr>标记内可以嵌套多个<td>或者<th>标记

tr属性：

- bgcolor设置背景颜色格式bgcolor="颜色值"
- align 设置垂直方向对齐方式 align="top/center/bottom"

4.<td>和<th>都是单元格的标记。<td>必须嵌套在<tr>内，成对出现

区别：1.<th>是表示头标记，通常位于首行或者首列。<th>中的文字默认会被加粗，而<td>不会。

2.<td>是数据标记，表示单元格的具体数据

共点：两者的标签属性都是一样的。

属性：

bgcolor单元格的背景颜色
<rowspan>一列跨多行
<colspan>一行跨多列
<valign>垂直对齐方式
<align>单元格对齐方式

<height>/<width>单元的高度/宽度

<html>
<head>
    <title>表格的制作演练</title>
    <meta charset="utf-8">
</head>
<body>
<table frame="border" cellpadding="15" cellspacing="0" align="center" rules="all" width="960" height="500">
    <tr align="center" bgcolor="#ccc">
        <th>班级</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>成绩</th>
    </tr>
    <tr align="center">
        <td>四年级一班</td>
        <td>王三霞</td>
        <td>11</td>
        <td>85</td>
    </tr>
    <tr align="center">
        <td>四年级一班</td>
        <td>王二霞</td>
        <td>11</td>
        <td>85</td>
    </tr>
    <tr align="center">
        <td>四年级一班</td>
        <td>王霞</td>
        <td>11</td>
        <td>90</td>
    </tr>
    <tr align="center">
        <td>四年级一班</td>
        <td>王四霞</td>
        <td>11</td>
        <td bgcolor="red">60</td>
    </tr>
</table>
</body>
</html>

这是制作效果，大家可以检测一下。