零基础建站培训介绍

当前位置:

html表格table标签写法实例

在网页制作过程中,表格是一个网页不可或缺的元素之一,在HTML入门教程中,我们介绍了HTML中使用<table> 标签来制作表格。下面学做网站就以实现的方法来介绍一下html表格如何制作。

以下是通过HTML表格制作的一个课程表的代码。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML表格-课程表</title>
</head>
<body>
    <table border="1" width="60%" bgcolor="#e9faff" cellpadding="2">
        <caption>课程表</caption>
        <tr align="center">
            <td colspan="2">时间\日期</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr align="center">
            <td rowspan="2">上午</td>
            <td>9:30-10:15</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>

        <tr align="center">
            <td>10:25-11:10</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>

        <tr>
            <td colspan="7"> </td>
        </tr>

        <tr align="center">
            <td rowspan="2">下午</td>
            <td>14:30-15:15</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>

        <tr align="center">
            <td>15:25-16:10</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>
    </table>
</body>
</html>

实现的效果如下:

html表格

表格代码含义含义:

<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格的表头。
<tr> 定义表格的行。
<td> 定义表格单元。
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
<col> 定义用于表格列的属性。
<colgroup> 定义表格列的组。

 

上一课: 下一课:

发表评论

*

* 绝不会泄露


零基础学建站就到学做网站论坛