标签中的,我们为了好看,还是把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里面的标题一样,顺着往下数的标题。
下标是一些控制标题的标签
标签 | 描述 |
| 有序列表 |
| 无序列表 |
| 列表项 |
| 列表 |
| 列表项 |
| 描述 |
这些列表还分有序列表,无序列表和自定义列表。
无序列表
、-
属性:disc:实体圆、circle:空心圆、square:实体方块
<!DOCTYPE html><html> <head> <title></title> <meta charset="utf-8"> </head> <body> <!-- 无序列表默认属性是disc,disc定义一个实体圆,所以disc不用刻意去设置 --> <ul> <li>我是第一个</li> <li>我是第二个</li> <li>我是第三个</li> </ul> <!-- 这些属性都是通过type来定义的,circle是定义一个空心圆 --> <ul type="circle"> <li>我是第一个</li> <li>我是第二个</li> <li>我是第三个</li> </ul> <!-- square定义实体方块 --> <ul type="square"> <li>我是第一个</li> <li>我是第二个</li> <li>我是第三个</li> </ul> </body></html>
有序列表
、-
属性:A、a、l、i、start
<!DOCTYPE html><html> <head> <title></title> <meta charset="utf-8"> </head> <body> <!-- 有序列表默认是数字往下计数的 --> <ol> <li>我是第一个</li> <li>我是第二个</li> <li>我是第三个</li> </ol> <!-- 定义A,就是按照大写字母来计数的,当然了,不能直接定义B,它不是不会从B开始数的 --> <ol type="A"> <li>我是第一个</li> <li>我是第二个</li> <li>我是第三个</li> </ol> <!-- 定义a,就是安装小写字母开始计数的 --> <ol type="a"> <li>我是第一个</li> <li>我是第二个</li> <li>我是第三个</li> </ol> <!-- 定义I,就是按照大写罗马数字计数的 --> <ol type="I"> <li>我是第一个</li> <li>我是第二个</li> <li>我是第三个</li> </ol> <!-- 定义i,就是按照大写罗马数字计数的 --> <ol type="i"> <li>我是第一个</li> <li>我是第二个</li> <li>我是第三个</li> </ol> <!-- start属性,就是按照从多少数来计数,比如我想从3开始计数。start属性只能定义数字,不支持英文字母哦。 --> <ol start="3"> <li>我是第一个</li> <li>我是第二个</li> <li>我是第三个</li> </ol> </body></html>
嵌套列表
、-
嵌套列表就是有序列表套无序列表,无序套有序的呗。
<!DOCTYPE html><html> <head> <title></title> <meta charset="utf-8"> </head> <body> <ol> <li>人物</li> <ul> <li>斯蒂芬·保罗·乔布斯</li> <li>丹尼斯·里奇</li> <li>比尔·盖茨</li> </ul> <li>动物</li> <ul> <li>猫</li> <li>狗</li> <li>熊</li> </ul> </ol> </body></html>
自定义列表
、- 、
-
自定义的列表,就是没有有序、无序的点。后期可以用CSS样式来加工修改。也是比较常用的操作
<!DOCTYPE html><html> <head> <title></title> <meta charset="utf-8"> </head> <body> <dl> <li>我是标题</li> <dt> <dd>我是正文,我必须长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长</dd> </dt> </dl> </body></html>