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> 登录后复制 可以看到,上面注释下面的 | 与 | 反正写了。会出现一个很细小的表格,但是 中写的文字,是不会显示上去的 所以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> 登录后复制 表格中的表头 我是表头 | 还可以给表添加表头,使用 标签, | 标签也是在 | 标签中的,我们为了好看,还是把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> 登录后复制 还可以设置表格内的边距 cellpadding 属性 也可以设置单元格边距 cellspacing 属性 <table border="1" cellpadding="10" cellspacing="10"> <tr> <td>xxx</td> </tr></table> 登录后复制 带有标题的表格 <table border="1" cellpadding="10" cellspacing="10"> <caption>xxx表</caption> <tr> <td>xxx</td> </tr></table> 登录后复制 表格内的颜色bgcolor属性 <table border="1" bgcolor="red"> <tr> <td>xxx</td> </tr></table> 登录后复制 单元格内容排列 align 属性分别有center、left、right <table border="1" align="center"> <caption>xxx表</caption> <tr> <td>xxx</td> </tr></table> 登录后复制 跨行和跨列的单元格 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> 登录后复制 HTML列表 列表就是像word里面的标题一样,顺着往下数的标题。 下标是一些控制标题的标签 标签 | 描述 |
| 有序列表 | | 无序列表 | | 列表项 |
| 列表 | | 列表项 | | 描述 | 这些列表还分有序列表,无序列表和自定义列表。 无序列表
|
|
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
-
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