Table表格

1.Table的一些属性

   <tr>                 行

  <td>                 列

  <th>                 定义表头，列，加粗显示

 <caption>         定义表格标题，居中(表格)显示

  <border>          边框

 <rowspan>        跨行合并

 <colspan>　　  跨列合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table表格</title>
</head>
<body>
    <table border="1" align="center" width="400px" height="200px" >
        <caption>大三上学期课程表</caption>
        <tr>
            <th colspan="7">第一周</th>
        </tr>
        <tr>
            <td>星期日</td>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
            <td rowspan="2">星期六</td>
        </tr>
        <tr>
            <td>不上课</td>
            <td>上课</td>
            <td>上课</td>
            <td>上课</td>
            <td>上课</td>
            <td>上课</td>
        </tr>
        <tr>
            <th colspan="7">第二周</th>
        </tr>
        <tr>
            <td>星期日</td>
            <td>星期一</td>
            <td rowspan="2">星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
            <td >星期六</td>
        </tr>
        <tr>
            <td>不上课</td>
            <td>不上课</td>
            <td>不上课</td>
            <td>不上课</td>
            <td>上课</td>
            <td>上课</td>
        </tr>
    </table>
</body>
</html>
Table表格-设置属性

2.thead tbody tfoot 对于结构复杂的表格，可以将表格分割成三个部分：题头、正文和脚注。

   thead    表格的头 用来放标题之类的东西

   tbody     表格的身体 放数据本体

   tfoot     表格的脚 放表格的脚注之类

   这三个标签的作用是：为了让表格(table)在下载的时候可以分段的显示,就是说在浏览器解析 HTML 时，table 是作为一个整体解释的，而使用了 tbody 标签后，tbody 标签中的内容可以优先显示。 它与 th 、tr、td 有明显的区别，使用 thead、tbody、tfoot 是为了控制显示顺序，表格本来是从上向下显示的，但是应用了 thead/tbody/tfoot 以后， 无论它们前后顺序如何改变， <thead> 内的元素总是在表的最上面，<tfoot> 总在表的最下面，thead 元素应该与 tbody 和 tfoot 元素结合起来使用。 但如果只有一个 tbody 的时候经常不写 tbody，我们平时不写时，浏览器都默认认为内容放在了 tbody 中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table表格</title>
</head>
<body>
    <table border="1" >
       <thead>
            <tr>
                <td>thead</td>
                <td>thead</td>
            </tr>
       </thead>
        <tbody>
            <tr>
                <td>tbody</td>
                <td>tbody</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>tfoot</td>
                <td>tfoot</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>
Table表格-复杂结构

3. 用 html 的方式改变 table 的边，变为单线 cellspacing="0" cellpadding="0"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table表格</title>
</head>
<body>
    <table border="1" cellpadding="0" cellspacing="0">
        <tr>
            <th colspan="7">第一周</th>
        </tr>
        <tr>
            <td>星期日</td>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
            <td rowspan="2">星期六</td>
        </tr>
        <tr>
            <td>不上课</td>
            <td>上课</td>
            <td>上课</td>
            <td>上课</td>
            <td>上课</td>
            <td>上课</td>
        </tr>
    </table>
</body>
</html>
Table表格--边框线
posted @ 2019-07-04 21:38  C_XingM  阅读(215)  评论(0)  编辑  收藏  举报