HTML自学笔记-3（表格标签与列表标签）

本篇博客来记录HTML中的表格标签和列表标签

一、表格标签

就像Excel表格一样，网页中的表格也有若干行组成，每行也被分割为若干单元格

表格由 <table> 标签来定义。行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

格式：

<table>
    <tr>
        <td> </td>
    </tr>
</table>

解释：一对table代表一个表格，一对tr标签代表表格中的一行，一对td代表表格中的一个单元格。如果你只是这样写你会发现在浏览器打开之后什么也看不到，貌似没有表格。这是因为表格标签有一个边框属性，这个属性决定了边框的宽度，如果你不改变这个属性，默认值就为0，所以看不到标签

此属性在开始的table标签中设置即可。  <table border=“ ”>

那我们就来说说表格标签的属性吧

1.宽度（width）和高度（height）属性——可以给table和td标签使用

td标签使用时只改变当前单元格，不影响整个表格

 

2.水平对齐和垂直对齐的属性——水平可以给table，tr，td使用，而垂直可以给tr,td用

（1）。给table设置align属性，可以控制表格在水平方向的对齐方式

<table align=“center/top/bottom ”>

（2）、给tr设置align属性，可以控制当前行在水平方向的对齐方式

<tr align=“center/top/bottom ”>

（3）、给td设置align属性，可以控制当前单元格在水平方向的对齐方式

<td align=“center/top/bottom ”>

（4）、给tr设置valign属性，可以控制当前行在垂直方向的对齐方式

<tr valign=“center/top/bottom ”>

（5）、给td设置valign属性，可以控制当前单元格在垂直方向的对齐方式

<td valign=“center/top/bottom ”>

 

3、外边距和内边距属性——只能给table用

外边距(cellspacing)指的是单元格和单元格之间的距离（默认为2px），内边距(cellpadding)指的是单元格的边框和文字的距离(默认为1)

 

4、 <th> 标签（标题单元格标签）

表格的表头使用 <th> 标签进行定义，表头中的文本显示为粗体居中。（在表格里面把td换成th即可添加表头）

 

5、caption标签（使得表格标题距离表格居中）

格式：

<table>
    <caption>
        <h1>你好</h1>
    </caption>
</table>

注意：caption只能写在table标签中并且caption一定要紧跟table标签后

 

6、在单元格插入图片或者背景图片

插入图片：

<table>
    <tr>
        <td>
            <img src="图片.png">
        </td>
    </tr>
</table>

插入背景图片：

<table>
    <tr>
       <td background="图片.png"></td>
    </tr>
</table>

可以分别试试两种方法插入图片，你会发现插入之后效果是不一样的

 

6、在单元格中放超链接

格式;

<a href=" "> </a>

 

7、表格的结构（了解）

<table>
   <caption>表格的标题</caption>
    <thead>指定表头信息</thead>
    <tbody>指定表格主体信息</tbody>
    <tfoot>制定表格的附加信息（页尾）</tfoot>
</table>

8、单元格合并

（1）、水平：<td colspan=" "></td>——向后合并几个单元格

（2）、垂直：<td rowspan=" "></td>——向下合并几个单元格

 

二、列表标签

1、无序列表

格式：

<ul>
    <li>需要显示的条目内容</li>
</ul>

注意：ul与li标签是一个整体，不能单独使用任何一个

在li标签里面还可以添加其他标签，例如<h>标签，<p>标签........

在<li>标签中又可以嵌套其他标签

2、有序标签

格式：

<ol>
    <li>需要显示的条目内容</li>
</ol>

3、定义标签

<dl>
    <dt> </dt> <!-- 用来定义列表中的标题 -->
    <dd> </dd> <!-- 用来定义与标题对应的描述 -->
</dl>

注意：一个dt可以没有对应的dd，也可以有多个对应的dd

 

 

本篇博客内容到此也就结束了 。