html表格

基本结构

常用属性

• table：表格
  • with：宽
  • height：高
  • border：表格外边框宽度
  • cellspacing：单元格之间的间距
• caption：表格标题
• thead：表格头部
  • height：高
  • align：水平对齐方式
    • left：左对齐
    • center：中间对齐
    • right：右对齐
  • valign：垂直对齐方式
    • top：顶部对齐
    • middle：中间对齐
    • bottom：底部对齐
• tbody：表格主体
  • 同thead
• tfoot：表格注脚
  • 同thead
• tr：每一行
  • 同thead
• th：表格头部每一个单元格
  • with：宽
  • height：高
  • align：水平对齐方式
  • valign：垂直对齐方式
  • rowspan：指定要跨的行数
  • colspan：指定要跨的列数
• td：表格主体、注脚每一个单元格
  • 同th

跨行、跨列

示例1

<table border="1">
    <!-- 表格标题 -->
    <caption>学生信息</caption>
    <!-- 表格头部 -->
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>民族</th>
            <th>政治面貌</th>
        </tr>
    </thead>
    <!-- 表格主体 -->
    <tbody>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>18</td>
            <td>汉族</td>
            <td>团员</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>20</td>
            <td>满族</td>
            <td>群众</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>男</td>
            <td>20</td>
            <td>回族</td>
            <td>党员</td>
        </tr>
        <tr>
            <td>赵六</td>
            <td>女</td>
            <td>21</td>
            <td>壮族</td>
            <td>团员</td>
        </tr>
    </tbody>
    <!-- 表格脚注 -->
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>共计：4人</td>
        </tr>
    </tfoot>
</table>

示例2

<table border="1" cellspacing="0">
    <caption>课程表</caption>
    <thead>
        <tr>
            <th>项目</th>
            <th colspan="5">上课</th>
            <th colspan="2">活动与休息</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>星期</td>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
            <td>星期六</td>
            <td>星期日</td>
        </tr>
        <tr>
            <td rowspan="4">上午</td>
            <td>3-2</td>
            <td>3-3</td>
            <td>3-4</td>
            <td>3-5</td>
            <td>3-6</td>
            <td>3-7</td>
            <td rowspan="4">休息</td>
        </tr>
        <tr>
            <td>4-2</td>
            <td>4-3</td>
            <td>4-4</td>
            <td>4-5</td>
            <td>4-6</td>
            <td>4-7</td>
        </tr>
        <tr>
            <td>5-2</td>
            <td>5-3</td>
            <td>5-4</td>
            <td>5-5</td>
            <td>5-6</td>
            <td>5-7</td>
        </tr>
        <tr>
            <td>6-2</td>
            <td>6-3</td>
            <td>6-4</td>
            <td>6-5</td>
            <td>6-6</td>
            <td>6-7</td>
        </tr>
        <tr>
            <td rowspan="2">下午</td>
            <td>7-2</td>
            <td>7-3</td>
            <td>7-4</td>
            <td>7-5</td>
            <td>7-6</td>
            <td>7-7</td>
            <td rowspan="2">休息</td>
        </tr>
        <tr>
            <td>8-2</td>
            <td>8-3</td>
            <td>8-4</td>
            <td>8-5</td>
            <td>8-6</td>
            <td>8-7</td>
        </tr>
    </tbody>
</table>