HTML表格
- 表格主要显示、展示数据。
- 表格基本语法:
<table>
定义一个表格,<tr>
定义表格中的一行,<td>
定义一行中的某一个单元格,其中<tr>
和<td>
都要嵌套在<table>
中。
<table>
<tr><td>姓名</td><td>年龄</td><td>性别</td></tr>
<tr><td>a </td><td> 1</td><td> 男</td></tr>
<tr><td>b </td><td> 2</td><td> 女</td></tr>
<tr><td>c </td><td> 3</td><td> 男</td></tr>
</table>
姓名 |
年龄 |
性别 |
a |
1 |
男 |
b |
2 |
女 |
c |
3 |
男 |
<th>
标签代表HTML表格中的表头部分(table head),一般表头位于表格第一行或第一列,表头中的内容会加粗居中
<table>
<tr><th>姓名</th><th>年龄</th><th>性别</th></tr>
<tr><td>a </td><td> 1</td><td> 男</td></tr>
<tr><td>b </td><td> 2</td><td> 女</td></tr>
<tr><td>c </td><td> 3</td><td> 男</td></tr>
</table>
姓名 |
年龄 |
性别 |
a |
1 |
男 |
b |
2 |
女 |
c |
3 |
男 |
- 表格属性:可以通过设置表格属性来定义表格的显示,不过主要通过CSS来设定。
<table align="center" border="1" >
<tr><th>姓名</th><th>年龄</th><th>性别</th></tr>
<tr><td>a </td><td> 1</td><td> 男</td></tr>
<tr><td>b </td><td> 2</td><td> 女</td></tr>
<tr><td>c </td><td> 3</td><td> 男</td></tr>
</table>
姓名 |
年龄 |
性别 |
a |
1 |
男 |
b |
2 |
女 |
c |
3 |
男 |
- 单元格划分:由于有的表格可能很长,为了更好定义表格语义,可以将表格划分为表格头部和表格主体两个部分,使用
<thead>
和<tbody>
标签来进行划分
<table align="center" border="1" >
<thead><!--头部-->
<tr><th>姓名</th><th>年龄</th><th>性别</th></tr>
</thead>
<tbody><!--主体-->
<tr><td>a </td><td> 1</td><td> 男</td></tr>
<tr><td>b </td><td> 2</td><td> 女</td></tr>
<tr><td>c </td><td> 3</td><td> 男</td></tr>
</tbody>
</table>
- 单元格合并:可以将多个单元格合并为一个单元格,利用
rowspan="合并单元格个数"
来进行跨行合并,利用colspan="合并单元格个数"
来进行跨列合并.若为跨行合并,目标单元格为最上侧单元格,若为跨列合并,目标单元格为最左侧单元格
<table border="1" width="300" height="150">
<tr>
<td></td>
<td colspan="2"></td>
<!--<td>此单元格被合并</td>-->
</td>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</td>
<tr>
<!--<td>此单元格被合并</td>-->
<td></td>
<td></td>
</td>
</table>
HTML列表
- 列表是用来布局的。
- 列表分为三类,分别为无序列表,有序列表和自定义列表
- 无序列表
- 无序列表利用
<ul>
标签,列表项用<li>
标签,基本语法如下:
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
<ul>
标签中只能包含<li>
标签,但是<li>
标签中可以包含任意的元素
- 有序列表
- 有序列表利用
<ol>
标签,列表项用<li>
标签,基本语法如下:
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
- a
- b
- c
- 自定义列表
- 自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。
- 自定义列表利用
<dl>
标签,该标签与<dt>
(定义项目、名字)和<dd>
(描述每一个项目、名字)一起使用,一个<dt>
一般对应多个<dd>
。
<dl>
<dt>项目1</dt>
<dd>项目1描述1</dd>
<dd>项目1描述2</dd>
<dd>项目1描述3</dd>
<dt>项目2</dt>
<dd>项目2描述1</dd>
<dd>项目2描述2</dd>
<dd>项目2描述3</dd>
</dl>
-
项目1
-
项目1描述1
-
项目1描述2
-
项目1描述3
-
项目2
-
项目2描述1
-
项目2描述2
-
项目2描述3