HTML网页制作:[5]如何在网页中插入表格

2025-11-23 12:26:18

1、表格有什么?

1)框架

2)横线

3)竖线

4)方格

所以,一个表格是由许多线和方格组成的。当然,可以加上标题等。

用HTML创建表格没有任何不同。

1)table:表格标记,表格中所有的属性等都必须在<table></table>当中

2)tr:行标记,表格中水平间隔

3)td:列标记,表格中垂直间隔

2、OK,来做一个简单的表格。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<table>

    <tr>

    <td>语文</td>

    <td>数学</td>

    </tr>

    <tr>

    <td>英语</td>

    <td>嘿嘿</td>

    </tr>

</table>

</body>

</html>

HTML网页制作:[5]如何在网页中插入表格

3、效果图如下

好吧,没有框框

HTML网页制作:[5]如何在网页中插入表格

4、怎么加上框框呢?

给table加上属性

<table border="1">

再来试试

HTML网页制作:[5]如何在网页中插入表格

5、给表格设置标题:

只要在<table>的下面加上

<caption>XXXXS</caption>即可。

HTML网页制作:[5]如何在网页中插入表格

6、效果图如下

HTML网页制作:[5]如何在网页中插入表格

7、有时候,表格是有表头的,给表头加黑是一种方式,还有一种方式则是设置表头。

设置表头的方法是:<th>XXX</th>

代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<table border="1">

    <caption>课程表</caption>

    <th>上午</th>

    <th>下午</th>

    <tr>

    <td>语文</td>

    <td>数学</td>

    </tr>

    <tr>

    <td>英语</td>

    <td>嘿嘿</td>

    </tr>

</table>

</body>

</html>

HTML网页制作:[5]如何在网页中插入表格

8、效果图如下

HTML网页制作:[5]如何在网页中插入表格

9、关于表格的内容还有很多,我这里只是起到一个抱砖引玉的作用,还有更多的知识,不要不断的努力去学习,才能掌握。

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢