Web前端入门（六）表格

总目录

1.表格

• table 用来定义表格的标签
• tr 用来定义表格中的行，必须嵌套在<table></table> 标签中
• td 用来定义表格中的单元格，必须嵌套在<tr></tr> 标签中
• th 用来定义表格中的表头，表头单元格里面的内容加粗居中显示
• 表格标题caption通常这个标题会被居中且显示于表格之上。caption 标签必须紧随 table 标签之后。这个标签只存在 表格里面才有意义。

<body>
    <table>
        <tr>  <th>数字1</th>     <th>数字2</th>    <th>数字3</th>        </tr>
        <tr>  <td>1</td>     <td>2</td>    <td>3</td>        </tr>
        <tr>  <td>1</td>     <td>2</td>    <td>3</td>        </tr>
        <tr>  <td>1</td>     <td>2</td>    <td>3</td>        </tr>
    </table>
</body>

1.1 表格属性

表格标签的属性实际开发并不常用，因为基本都是通过后面的CSS来设置的

属性名	属性值	描述
align	left,center,right	规定表格相对周围元素的对齐方式
border	1或者’’ ‘’	规定表格单元是否拥有边框，默认为" "，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素（即单元格文字与边框边缘的距离）
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	定表格的宽度

<table align=center border="1" cellpadding="20" cellspacing="0" width="500">

1.2 表格结构标签

为了更好的表示表格的语义，可以将表格分割成 表格头部 和表格主体两大部分

• 用 <thead></thead> 标签表示表格的头部区域，<thead>内部必须拥有<tr>标签，一般是位于第一行
• 用<tbody></tbody> 标签表示表格的主体区域，主要是用于放数据本体
• 以上标签都是放在<table></table>标签中

<table align="center" border="1"cellpadding="10" cellspacing="0">
    <thead>
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七天</th>
            <th>相关链接</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
    </tbody>
</table>

1.3 合并单元格

• 跨行合并：rowspan=“合并单元格的个数”
• 跨列合并：colspan="合并单元格的个数"
• 合并的顺序按照先上后下、先左后右的顺序 ,合并完之后需要删除多余的单元格，即以优先的单元格为目标单元格（在目标单元格添加属性）。
  

<td colspan="2"></td>