HTML网页制作:[5]如何在网页中插入表格
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]如何在网页中插入表格](https://exp-picture.cdn.bcebos.com/988e1c532f632385c1247a22cce833e038725da5.jpg)
3、效果图如下
好吧,没有框框
![HTML网页制作:[5]如何在网页中插入表格](https://exp-picture.cdn.bcebos.com/46a92de039723d039cf8a635bb486143d6d457a5.jpg)
4、怎么加上框框呢?
给table加上属性
<table border="1">
再来试试
![HTML网页制作:[5]如何在网页中插入表格](https://exp-picture.cdn.bcebos.com/d695563104ebf6a7701d1a98ffee1c324a184fa5.jpg)
5、给表格设置标题:
只要在<table>的下面加上
<caption>XXXXS</caption>即可。
![HTML网页制作:[5]如何在网页中插入表格](https://exp-picture.cdn.bcebos.com/4a594f2c8cf1d8a71121d03746e34b2c57ee47a5.jpg)
6、效果图如下
![HTML网页制作:[5]如何在网页中插入表格](https://exp-picture.cdn.bcebos.com/e4b5e2f5ee0d3acee9c5ead887e265e7350fbba5.jpg)
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]如何在网页中插入表格](https://exp-picture.cdn.bcebos.com/65390a23beb9763e6dd023656ad06de89b61b0a5.jpg)
8、效果图如下
![HTML网页制作:[5]如何在网页中插入表格](https://exp-picture.cdn.bcebos.com/b1454a1bd10ff2265588a9bd9c99e92abbb8a4a5.jpg)
9、关于表格的内容还有很多,我这里只是起到一个抱砖引玉的作用,还有更多的知识,不要不断的努力去学习,才能掌握。