HTML5基础教程(六) - 博客详情

HTML5有以下表格标签：

标签	含义
table	定义表格，html5不推荐使用cellspacing和cellpadding属性，推荐使用css替换，定义表格尺寸推荐使用CSS
caption	定义表格的标题
th	定义表头
tr	定义行
td	定义单元格，rowspan跨行属性， colspan跨列属性
thead/tbody/tfoot	用来规定表格的各个部分，对表格结构进行细分，使其能被更精确、更多样的控制,很少使用

HTML4.01的table中常用的cellspacing和cellpadding属性如何理解呢？ cellpadding: 表示单元格内边距到其内容之间的距离:

cellspacing:表示单元格与单元格之间的距离:

使用html5的表格实现一个课程表的效果，代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
    <!--定义表格使用到的样式表-->
    <style type="text/css">
        /*定义表格尺寸*/
        table {
            border-collapse: collapse;
            border: solid 1px Black;
            width: 600px;
            height: 400px;
        }

        td,th {
            text-align: center; /*td单元格的文字水平居中*/
            border: solid 1px Black;
        }

        th {
            background-color: #CCCC99;
        }
    </style>
</head>
<body>

<h1>表格标签</h1>
<hr>

<table>
    <caption><h2>我的课程表</h2></caption>
    <tr>
        <th colspan="2">星期/时间</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>
    <tr>
        <td rowspan="4">上午</td>
        <td>1</td>
        <td>英语</td>
        <td>化学</td>
        <td>语文</td>
        <td>代数</td>
        <td>物理</td>
    </tr>
    <tr>
        <td>2</td>
        <td>英语</td>
        <td>化学</td>
        <td>语文</td>
        <td>代数</td>
        <td>物理</td>
    </tr>
    <tr>
        <td>3</td>
        <td>英语</td>
        <td>化学</td>
        <td>语文</td>
        <td>代数</td>
        <td>物理</td>
    </tr>
    <tr>
        <td>4</td>
        <td>英语</td>
        <td>化学</td>
        <td>语文</td>
        <td>代数</td>
        <td>物理</td>
    </tr>
    <tr>
        <td rowspan="3">下午</td>
        <td>5</td>
        <td>英语</td>
        <td>化学</td>
        <td>语文</td>
        <td>代数</td>
        <td>物理</td>
    </tr>
    <tr>
        <td>6</td>
        <td>英语</td>
        <td>化学</td>
        <td>语文</td>
        <td>代数</td>
        <td>物理</td>
    </tr>
    <tr>
        <td>7</td>
        <td>英语</td>
        <td>化学</td>
        <td>语文</td>
        <td>代数</td>
        <td>物理</td>
    </tr>
</table>

</body>
</html>

运行效果如下：