零基础建站培训介绍

当前位置:

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> 定义表格列的组。

 

上一课: 下一课:

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

相关教程

  • HTML常用书写工具有哪些 (115096 次浏览)
    HTML常用写书工具有以下几种:第一种:记事本记事本是最简单的HTML书写工具,但功能也是特别少的,不太适合建网站新手来使用。(新手学习HTML
  • HTML 文本格式化:使用 pre 标签对空行和空格进行控制。“计算机输出”标签:这些标签常用于显示计算机/编程代码。引用标签:使用 blockquote
  • HTML粗体标签:HTML b 标签b 标签-- 定义粗体文字 不符合标准网页设计的理念,不赞成使用. b标签是成对出现的,以<b>开始,以</b>结束 .
  • 特效介绍:jQuery带横向滚动条头部固定表格代码是一款jquery easyui实现的自定义表格样式代码。特效截图:特效适用:适用浏览器:IE8
  • wordpress 拥有一个特别强大的功能,那就是自定义栏目。但在使用自定义栏目时,如果栏目太多,使用时特别麻烦。如果你对Wordpress程序不了解,先学习
  • 在网页制作过程中,表格是一个网页不可或缺的元素之一,在HTML入门教程中,我们介绍了HTML中使用<table> 标签来制作表格。下面学做网站就以实现
  • 下面是使用jquery怎么给Table表格动态添加tr行的方法 引入jquery核心js文件,这样才能使用jquery方法 创建js添加tr函数[cce_js]function addT
  • 在一个网页中多处使用了表格table标签,这个时候给指定的表格对象设置样式依然可以通过CSS进行控制设置。其实有时我们这样思考将table标签当作DIV
  • HTML换行标签:<BR/>br 是换行(Break)的缩写。文本会在这个标签的地方换行。在HTML代码里直接换行的话,按浏览器的不同可能显示为一个空格,或
  • 在前面的HTML入门教程中,我们介绍了什么是超链接。对于建网站新手来说,很多人不知道超链接有很多的写法。以下就是超链接常见的几个写法。显
  • 在自己做网站时,经常会用到Html有序列表、无序列表与定义列表,下面列举了三种列表的写法。(相关教程:HTML入门教程)有序列表[cce_html]&l
  • HTML表单的代码写法 (17006 次浏览)
    HTML表单在我们做网站中经常会被用到,如用户注册,网站投稿,评论等都会使用到表单。下面分享一下HTML表单的代码写法。(相关教程:网站Form表单实现