<table>标签
<table>标签就是表格标签
<tr>就代表表格中的一行数据,一堆tr就是一行数据
<th>只能用于表格的第一行,能够给第一行的文字自动加粗,和针对文字所在的单元格内居中对齐
<td>代表表格中一行中的一个单元格,也就是说一对td标签就是一行中的一个单元格。
针对<table>标签还有多个属性
-
colspan属性为合并列单元格(表格内容向右移动,以行为单位移动)。
-
rowspan属性合并行单元格(单元内容向下移动,以列为点位向下移动)。
-
border属性显示表格的粗细程度。
-
width 表格的大小px为表格的固定值也可以使用%代替。
-
cellspacing单元格与单元格的间距(调整大小)
-
cellpaddingcellpadding表格宽度大小(同样可以调整大小)
-
align 属性为调整表格的位置 在没学CSS之前可以调整位置位置对于整个页面只能左对齐,居中,和右对齐。
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格</title> </head> <body> <!-- border表格的粗细程度 width表格的大小px为表格的固定值 也可以使用%代替 --> <!-- cellspacing单元格与单元格的间距 cellpadding表格宽度大小 align表格位置 --> <table border="1px" width="600px" cellspacing="0px" cellpadding="0px" align="center"> <tr> <th rowspan="0">排名</th> <th>名字</th> <th>趋势</th> <th>今日搜索次数</th> <th>最近七日</th> <th>相关链接</th> </tr> <tr> <td>1</td> <td>原神</td> <td><img src="" alt=""></td> <td>n+</td> <td>n+</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr> <td>2</td> <td>崩坏1</td> <td><img src="" alt=""></td> <td>n+</td> <td>n+</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr> <td>3</td> <td>崩坏2</td> <td><img src="" alt=""></td> <td>n+</td> <td>n+</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr> <td>4</td> <td>崩坏3</td> <td><img src="" alt=""></td> <td>n+</td> <td>n+</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr> <td>5</td> <td>崩坏:星穹铁道</td> <td><img src="" alt=""></td> <td>n+</td> <td>n+</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <!-- 第七行 --> <tr> <td>6</td> <td>想不起来了</td> <td><img src="" alt=""></td> <td>n+</td> <td>n+</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> </table> </body> </html>
有序列表,无序列表,自定义列表
有序列表:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>有序列表</title>
</head>
<body>
<!-- 默认的为阿拉伯数字排序 -->
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<!-- 大写字母排序 -->
<ol type="A">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ol>把<li>包裹起来,typle会改变有序列表数字的形式,
无序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul type="">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
无序列表排列方式为<ul>包括<li>与有序排列不同的是无序排列前边不是数字而是一个个的实心黑点。
自定义排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自由排序</title>
</head>
<body>
<!-- <dl> 为无需列-->
<dl>
<dt>姓名</dt>
<dd>张三</dd>
<dd>李四</dd>
<dd>王五</dd>
<dd>老六</dd>
<dt>年龄</dt>
<dd>19</dd>
<dd>21</dd>
<dd>22</dd>
<dd>23</dd>
</dl>
</body>
</html>
自由排序中为<dl>包括<dt>和<dd>,<dt>是列表的第一行,<dd>在使用时跟在<dt>后边在排序是会自动缩进 不与<dt>对齐。