表格标签

表格标签

17.<table> 标签

• <table> 标签定义 HTML 表格
• 一个 HTML 表格包括 <table> 元素，一个或多个 <tr>、<th> 以及 <td> 元素。
• 常用属性

属性	值	描述
align	left center right	规定了表格的对齐方式
bgcolor	rgb(x,x,x) #xxxxxx 颜色名字	规定了表格的背景颜色
border	number	规定了表格单元边框大小
cellpadding	number	规定了内容和单元格之间的距离
cellspacing	number	规定了单元格之间的距离
width	number %	规定了表格的宽度

18.<tr>标签

• <tr>标签用于定义表格的行，包含一个或多个th或td元素
• 常用属性：align bgcolor

19.<th>标签

• <th>标签用于定义表格的表头，内部文本通常为居中加粗显示，这个标签在表格中是可以省略的
• 使用水平标题的表格

<table border="1" cellpadding="0" cellspacing="0" width="100">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>20</td>
    </tr>
</table>

姓名	年龄
张三	20

- 使用垂直标题的单元格

<table border="1" cellspacing="0" cellpadding="0">
    <tr>
        <th>姓名</th>
        <td>张三</td>
    </tr>
    <tr>
        <th>年龄</th>
        <td>20</td>
    </tr>
</table>

姓名	张三
年龄	20

20.<caption>标签

• <caption>标签用于定义表格的标题

<table border="1" cellspacing="0" cellpadding="0">
    <caption>学生信息</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>学号</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>20</td>
        <td>1</td>
    </tr>
</table>

学生信息

姓名	年龄	学号
张三	20	1

21.<td>标签

• <td>标签用于定义表格的单元格
• 常用属性：align bgcolor height width
• 重点属性：
  
  • colspan 用于设定列合并
  • rowspan 用于设定行合并
• 跨行的表格

<table border="1" cellspacing="0" cellpadding="0">
    <caption>跨行的表格</caption>
    <tr>
        <th>姓名</th>
        <th>张三</th>
    </tr>
    <tr>
        <th rowspan="2">联系方式</th>
        <td>tel:1898243xxxx</td>
    </tr>
    <tr>
        <td>qq:342333xxx</td>
    </tr>
    <tr>
        <th>学号</th>
        <td align="center">1</td>
    </tr>
</table>

跨行的表格

姓名	张三
联系方式	tel:1898243xxxx
	qq:342333xxx
学号	1

• 跨列的表格

<table border="1" cellspacing="0" cellpadding="10">
    <caption>跨列的表格</caption>
    <tr>
        <th>姓名</th>
        <th colspan="2">联系方式</th>
        <th>学号</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>tel:1898243xxxx</td>
        <td>qq:342333xxx</td>
        <td align="center">1</td>
    </tr>
</table>

跨列的表格

姓名	联系方式		学号
张三	tel:1898243xxxx	qq:342333xxx	1

• 表格内可以包含其他标签

<table border="1" cellspacing="0" cellpadding="10">
    <caption>包含其他标签的表格</caption>
    <tr>
        <td>
            <p>这是一个段落</p>
            <a href="#">这是一个链接</a>
        </td>
        <td>
            <table border="1" cellspacing="0" cellpadding="10">
                <caption>跨列的表格</caption>
                <tr>
                    <th>姓名</th>
                    <th colspan="2">联系方式</th>
                    <th>学号</th>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>tel:1898243xxxx</td>
                    <td>qq:342333xxx</td>
                    <td align="center">1</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>这随便来一句话</td>
        <td>
            <p>这是一个有序列表</p>
            <ol>
                <li>数据一</li>
                <li>数据二</li>
                <li>数据三</li>
            </ol>
        </td>
    </tr>
</table>

包含其他标签的表格

这是一个段落 这是一个链接	跨列的表格 姓名 联系方式 学号 张三 tel:1898243xxxx qq:342333xxx 1
这随便来一句话	这是一个有序列表 数据一 数据二 数据三

22.<thead>、<tbody>和<tfoot>标签

• 这3个标签分别用于规定表格的表头、主体、页脚
• 当包含多个页面的长的表格被打印时，表格的表头和可被打印在包含表格数据的每张页面上
• thead、tbody 和 tfoot 元素默认不会影响表格的布局。不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。
• 注意：tfoot应该写在tbody之前