学习笔记(二)——HTML中的表格标签和列表标签
程序员文章站
2022-05-01 22:52:38
...
表格标签
1.表格标签的基本语法
表格标签包括<table>标签,整个表格的内容都要写在该标签内;<tr>表示表格的一行;<th>和<td>都表示表格中的单元格,区别在于<th>的文字居中加粗了,一般用作表头;<thead>标签和<tbody>标签分别表示表头和表体数据部分,这两个标签不是一定要使用,但使用了会使代码更加有条理,更好区分表格。
<table> <--! 整个表格必须写在这个标签内 -->
<thead> <--! 表示表头部分 -->
<tr> <--! 表示表格一行 -->
<th>表头名称1</th> <--! 表示表头行中的元素,一行可以有多个 -->
<th>表头名称2</th>
··· ···
</tr>
<thead>
<tbody> <--! 表示表主体部分,存放数据的地方 -->
<tr> <--! 表示表格第一行数据 -->
<td>第一行第一个单元格</td> <--! 表示行中的元素,一行可以有多个-->
<td>第一行第二个单元格</td>
··· ···
</tr>
<tr> <--! 表示表格第二行数据 -->
<td>第二行第一个单元格</td>
<td>第二行第二个单元格</td>
··· ···
</tr>
··· ···
<tbody>
</table>
表格相关标签的图解如下所示:
2.表格属性
表格属性都写在<table>标签内。
属性 | 说明 |
---|---|
align | 表示对齐方式,属性值有center/right/left,分别表示让表格居中/居右或居左,注意该属性是调整整个表格在页面中的对齐方式,而不是调整表格内容的对齐方式,表格内容的对齐方式要用CSS来调 |
border | 设置表格边框,属性值一般写1或“ ”,默认“ ”(无边框) |
cellpadding | 表示单元格边沿与内容之间的空隙大小属性值为像素值,默认1px |
cellspacing | 表示单元格与单元格之间的距离,属性值为像素值,默认2px |
weight | 设置表格宽度,属性值为像素值或百分比 |
height | 设置表格高度 |
3.合并单元格
- 合并单元格有两种模式:
- 跨行合并:rowspan=“合并单元格的个数”
- 跨列合并:colspan=“合并单元格的个数”
- 属性的书写位置:
- 该属性要写在目标单元格标签内
- 目标单元格是指所要合并单元格区域的最上(跨行合并时)或者最左(跨列合并时)的单元格
- 合并单元格的步骤:
- 确定是跨行合并还是跨列合并
- 确定目标单元格,在目标单元格的标签上写合并代码
- 删除被合并的其他单元格代码,只保留目标单元格代码
列表标签
1.无序列表
- 无序列表的基本语法:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
··· ···
</ul>
- 注意事项:
- 无序列表非常常用,无序列表广泛用于页面布局,但默认列表项前都会带一个黑色小圆点,可以通过CSS去掉
- <ul>标签内只能有直接后代<li>标签,虽然包含其他标签也可以显示,但为了规范最好不要这么做
- <li>标签中可以包含任何标签和文本
2.有序列表
- 有序列表的基本语法:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
··· ···
</ol>
有序列表相对少用,基本与无序列表相同,只是列表项前的小圆点变成数字序号。
3.自定义列表
- 自定义列表的基本语法:
<dl>
<dt>名词1</dt>
<dd>名词1拓展1</dd>
<dd>名词1拓展2</dd>
··· ···
<dt>名词2</dt>
<dd>名词2拓展1</dd>
<dd>名词2拓展2</dd>
··· ···
</dl>
- 注意事项:
- 自定义列表的列表项前没有自带装饰
- <dl>中只能直接包含<dt>和<dd>标签,<dt>和<dd>标签中可以包含任意标签
- <dt>和<dd>标签是并列关系不是包含关系,一般<dd>标签是对<dt>标签的解释性描述
- 每一个<dt>+<dd>模块内部是垂直排列的,一个模块占一整大行
上一篇: Vue.js计算属性computed