HTML/CSS学习记录（4）

来源：互联网发布：php写入mysql数据库编辑：程序博客网时间：2024/05/17 01:55

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>

在浏览器显示出来就是：

HeadingAnother Heading100200300400

表格中的空单元格

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

<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>&nbsp;</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>

显示：

一个定义列表：

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

阅读全文

0 0