HTML表格 表格其实就是很多的小单元格,而这些小单元格很有次序的排列着,它们有很多行,很多列。这些很多行列组成的东西,就叫表格,表格是
标签来定义的。而标签中的行就是标签,而列就是标签,必须先定义行才能定义列。因为html中,每一列是在一行当中的。 下表总结了一些常用的标签:
表格 描述
定义表格 定义表格标题
定义表格的表头
定义表格的行
定义表格的单元 定义表格的页眉
定义表格的主体
定义表格的页脚 定义表格的列属性
先定义一个简单的表:
运行后可以看到
<!DOCTYPE html><html> <head> <title></title> <meta charset="utf-8"> </head> <body> <table border="1"> <tr> <td>水果</td> <td>水果</td> <td>水果</td> </tr> <!-- 下面将td与tr反正写了,是不会构成表的 --> <td> <tr>asd</tr> <tr>asd</tr> <tr>asd</tr> <tr>asd</tr> </td> </table> </body></html> Nach dem Login kopieren
可以看到,上面注释下面的
与 反正写了。会出现一个很细小的表格,但是 中写的文字,是不会显示上去的 所以html中,编写表格是要一行一行的写。
标签中包含
没有边框的表格
没有边框的表格,其实就是在
标签中,不加属性border。border这个属性是代表表格的边框。如果不加属性的话,默认border="0" ,但是没有边框有的时候你就看不出来它是一张表格了。所以有的时候会给border="1px"设置1像素的边框。暂时去掉border属性,完成一张没有边框的表格
<!DOCTYPE html><html> <head> <title></title> <meta charset="utf-8"> </head> <body> <table> <tr> <td>呵呵</td> <td>哈哈</td> <td>嘻嘻</td> </tr> <tr> <td>嘿嘿</td> <td>嘎嘎</td> <td>噗噗</td> </tr> <tr> <td>啊啊</td> <td>哦哦</td> <td>噢噢</td> </tr> </table> </body></html> Nach dem Login kopieren
表格中的表头
我是表头 还可以给表添加表头,使用
标签, 标签也是在 标签中的,我们为了好看,还是把border加上:
<!DOCTYPE html><html> <head> <title></title> <meta charset="utf-8"> </head> <body> <table border="1"> <tr> <th>人物</th> <th>介绍</th> <th>产品</th> </tr> <tr> <td>史蒂夫·保罗·乔布斯</td> <td>苹果CEO</td> <td>Apple系列</td> </tr> <tr> <td>丹尼斯·里奇</td> <td>C语言之父</td> <td>C语言</td> </tr> <tr> <td>比尔·盖茨</td> <td>微软CEO</td> <td>Windows系统</td> </tr> </table> </body></html> Nach dem Login kopieren
还可以设置表格内的边距 cellpadding 属性 也可以设置单元格边距 cellspacing 属性
<table border="1" cellpadding="10" cellspacing="10"> <tr> <td>xxx</td> </tr></table> Nach dem Login kopieren
带有标题的表格
<table border="1" cellpadding="10" cellspacing="10"> <caption>xxx表</caption> <tr> <td>xxx</td> </tr></table> Nach dem Login kopieren
表格内的颜色bgcolor属性
<table border="1" bgcolor="red"> <tr> <td>xxx</td> </tr></table> Nach dem Login kopieren
单元格内容排列 align 属性分别有center、left、right
<table border="1" align="center"> <caption>xxx表</caption> <tr> <td>xxx</td> </tr></table> Nach dem Login kopieren
跨行和跨列的单元格 colspan属性,准确的来说,就是合并单元格
<table border="1"> <caption>xxx表</caption> <tr> <td colspan="2">xxx</td> <td>xxx</td> </tr> <tr> <td>xxx</td> <td>xxx</td> <td>xxx</td> </tr></table> Nach dem Login kopieren
HTML列表 列表就是像word里面的标题一样,顺着往下数的标题。
下标是一些控制标题的标签
标签 描述 有序列表 无序列表 列表项 列表 列表项 描述
这些列表还分有序列表,无序列表和自定义列表。
无序列表
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
2024-10-22 09:46:29
2024-10-13 13:53:41
2024-10-12 12:15:51
2024-10-11 22:47:31
2024-10-11 19:36:51
2024-10-11 15:50:41
2024-10-11 15:07:41
2024-10-11 14:21:21
2024-10-11 12:59:11
2024-10-11 12:17:31