您的位置：首页 > Web前端 > CSS

HTML/CSS学习记录（4）

2017-07-11 09:31 387 查看

HTML表格

表格

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

例如：

<html>

<body>

<p>每个表格由 table 标签开始。</p>
<p>每个表格行由 tr 标签开始。</p>
<p>每个表格数据由 td 标签开始。</p>

<h4>一列：</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>

<h4>一行三列：</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>

<h4>两行三列：</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

</body>
</html>

这个表格是有边框的，即

<table border="1"

表格和边框属性

如果不定义边框属性，表格将不显示边框，如何显示表格边框：

<table border="1">

表格边框从 1 开始依次变粗，上面所示的代码显示的是带有普通边框的表格。

表格表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>

在浏览器显示出来就是：

Heading	Another Heading
100	200
300	400

表格中的空单元格

如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器中很可能这个空的单元格的边框不会被显示出来，所以一般在空单元格中添加一个空格占位符，就可以将边框显示出来。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td> </td>
<td>row 2, cell 2</td>
</tr>
</table>

表格的标题

表格的标题由使用元素：

<html>
<body>
<h4>这个表格有一个标题：</h4>
<table border="1">
<caption>我的标题</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

</body>
</html>

显示出来是：

这个表格有一个标题：

我的标题

100	200	300
400	500	600

向表格或表格单元格添加背景颜色或背景图像

向表格添加：

<table border="1" bgcolor="颜色或url">

向表格单元格添加：

<th bgcolor="颜色或url"> 表头 </th>

<td bgcolor="颜色或url"> 内容 </td>

在表格单元排列内容

可以使用align属性来排列内容，如：

<html>

<body>

<table width="400" border="1">
<tr>
<th align="left">消费项目</th>
<th align="right">一月</th>
<th align="right">二月</th>
</tr>
<tr>
<td align="left">衣服</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">化妆品</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
<tr>
<td align="left">食物</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
<tr>
<th align="left">总计</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>

</body>
</html>

除此之外，表格还能在不同的元素里显示元素：

<html>

<body>

<table border="1">
<tr>
<td>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</td>
<td>这个单元包含一个表格：
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>这个单元包含一个列表：
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>

</body>
</html>

显示出来是：

这是一个段落。

这是另一个段落。

这个单元包含一个表格：

A	B
C	D

这个单元包含一个列表：

苹果

香蕉

菠萝

HELLO

HTML列表

HTML 支持有序、无序和定义列表。

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。

例如：

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

显示：

Coffee

Milk

标记也可以通过<type>元素进行改变

<ul type="disc/circle/square">

有序列表

有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

显示：

Coffee

Milk

标记也可以通过<type>元素改变：

<ol type="A/a/I/i">

则标记分别为字母列表，小写字母列表，罗马字母列表，小写罗马字母列表

定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<html>

<body>

<h2>一个定义列表：</h2>

<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

</body>
</html>

显示：

一个定义列表：

计算机
用来计算的仪器 … …
显示器
以视觉方式显示信息的装置 … …

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html

相关文章推荐

新的分享

章节导航