我的简陋html总结(2)
1.dl标签(自定义列表)
dl是自定义列表,和ul,li同属于列表标签类
<dl>
<dt>这就是大哥</dt>
<dd>小弟1</dd>
<dd>小弟2</dd>
<dd>小弟3</dd>
</dl>
使用方法如图所示。 dd,dt都是块级元素,他们不能互相包含(dt的儿子中不能有dd,dd的儿子中也不能有dt),并且dt和dd只有在dl列表内部才能生效和使用
2.table标签(表格标签)
使用它的目的: 是为了列出信息供大家观看而不是为了排序,排序用列表标签
tr是块级元素,td和th是行内元素
table中包含 tr (tr是代表的一行),tr中可以包含td(td是一个单元格),th(也是单元格,不过指的是第一行的元素,h是head的意思)
使用案例代码
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="250">
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>刘德华</td> <td>男</td> <td>56</td></tr>
<tr><td>张学良</td> <td>男</td> <td>58</td></tr>
<tr><td>郭富城</td> <td>男</td> <td>51</td></tr>
</table>
cellpadding:是单元格内的内容和单元格边框之间的距离(上左右)
cellspacing:是单元格与单元格之间的距离,默认为1,若要设置重合则为设置为0
border:给表格table设置边框
如何合并单元格:
案例代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <table align="center" cellpadding="20" border="1" cellspacing="0">
<thead>
<tr><th>排名</th><th>关键词</th><th>趋势</th><th>今日搜索</th><th>最近7日</th><th>相关链接</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>鬼吹灯</td><td>上升</td><td>123</td><td>222</td><td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百度</a></td></tr>
</tbody>
</table> -->
<p></p>
<table width="500" height="250" border="1" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td ></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
效果如图:
单元格的合并顺序遵循: 从上到下,从左到右 的顺序开始
若横着合并单元格,则给所要合并的单元格的第一个格子内设定一个 colspan= n , 意思为合并从这个盒子开始的n个单元格使用之后,此外,后面书写了的但被合并的td应删除
若竖着合并单元格,同理,给要合并单元格的第一个格子内设定一个 rowspan=n ,意思为合并从这个盒子开始的n个单元格,使用之后,从第一个盒子开始的之后的tr里面对应的td应该删除
合并单元格的思路:
1.先把未合并的单元格完整的写出来
2.再把要合并的单元格的代码写出来
3.删除合并之后多于的单元格