欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

学习笔记(二)——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>

表格相关标签的图解如下所示:
学习笔记(二)——HTML中的表格标签和列表标签

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>模块内部是垂直排列的,一个模块占一整大行
相关标签: html 列表