AitSchool

表格

标签定义 HTML 表格

元素

基础元素

简单的 HTML 表格由

  • table (定义表格的元素)
  • tr (定义表格中的行)
  • th (定义表格中表头单元格)
  • td (定义表格中标准单元格)
星期一星期二星期三星期四星期五
语文数学英语化学物理
音乐体育政治生物地理
美术电脑自习历史自习
<table>
    <tr>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>化学</td>
        <td>物理</td>
    </tr>
    <tr>
        <td>音乐</td>
        <td>体育</td>
        <td>政治</td>
        <td>生物</td>
        <td>地理</td>
    </tr>
    <tr>
        <td>美术</td>
        <td>电脑</td>
        <td>自习</td>
        <td>历史</td>
        <td>自习</td>
    </tr>
</table>

其他元素

更复杂的 HTML 表格也可能包括 caption、thead、tfoot 以及 tbody 元素。

  • caption (定义表格标题，必须紧随 table 标签之后，通常这个标题会被居中于表格之上)
  • thead (定义表格的表头)
  • tfoot (定义表格的页脚、脚注或表注)
  • tbody (定义表格的表主体)
简单的课程表
星期一星期二星期三星期四星期五
语文数学英语化学物理
音乐体育政治生物地理
美术电脑自习历史自习
<table>
    <caption>简单的课程表</caption>
    <thead>
        <tr>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>化学</td>
            <td>物理</td>
        </tr>
        <tr>
            <td>音乐</td>
            <td>体育</td>
            <td>政治</td>
            <td>生物</td>
            <td>地理</td>
        </tr>
        <tr>
            <td>美术</td>
            <td>电脑</td>
            <td>自习</td>
            <td>历史</td>
            <td>自习</td>
        </tr>
    </tbody>
</table>

跨行跨列

  • rowspan 属性规定单元格可横跨的行数。
  • colspan 属性规定单元格可横跨的列数。
简单的课程表
时间星期一星期二星期三星期四星期五
上午语文数学英语化学物理
音乐体育政治生物地理
中午休息
下午美术电脑自习历史自习
<table>
    <caption>简单的课程表</caption>
    <thead>
        <tr>
            <th>时间</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">上午</td>
            <td >语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>化学</td>
            <td>物理</td>
        </tr>
        <tr>
            <td>音乐</td>
            <td>体育</td>
            <td>政治</td>
            <td>生物</td>
            <td>地理</td>
        </tr>
        <tr>
            <td>中午</td>
            <td colspan="5" align="center">休息</td>
        </tr>
        <tr>
            <td>下午</td>
            <td>美术</td>
            <td>电脑</td>
            <td>自习</td>
            <td>历史</td>
            <td>自习</td>
        </tr>
    </tbody>
</table>

属性

  • border 定义表格边框宽度
  • cellpadding 定义单元边沿与其内容之间的空白
  • cellspacing 定义单元格之间的空白
  • width 定义表单宽度
时间星期一星期二星期三星期四星期五
上午语文数学英语化学物理
音乐体育政治生物地理
中午休息
下午美术电脑自习历史自习
<table border="1" cellpadding="10" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>时间</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">上午</td>
            <td >语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>化学</td>
            <td>物理</td>
        </tr>
        <tr>
            <td>音乐</td>
            <td>体育</td>
            <td>政治</td>
            <td>生物</td>
            <td>地理</td>
        </tr>
        <tr>
            <td>中午</td>
            <td colspan="5" align="center">休息</td>
        </tr>
        <tr>
            <td>下午</td>
            <td>美术</td>
            <td>电脑</td>
            <td>自习</td>
            <td>历史</td>
            <td>自习</td>
        </tr>
    </tbody>
</table>

资源

← 表单 →