HTML初学----表格、列表

来源：互联网发布：1元洗车软件编辑：程序博客网时间：2024/04/30 13:29

一、表格

表格由 <table> 标签来定义。

每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。

字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

边框属性 : <table border = "1">

表头：使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本

注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

标题：<caption>我的标题</caption>

<body><table border="1"><caption>我的标题</caption><tr><th>Heading</th><th>Another Heading</th></tr><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></body></html>

实例:

1、本例演示如何定义跨行或跨列的表格单元格。

<html><body><h4>横跨两列的单元格：</h4><table border="1"><tr>  <th>姓名</th>  <th colspan="2">电话</th></tr><tr>  <td>Bill Gates</td>  <td>555 77 854</td>  <td>555 77 855</td></tr></table><h4>横跨两行的单元格：</h4><table border="1"><tr>  <th>姓名</th>  <td>Bill Gates</td></tr><tr>  <th rowspan="2">电话</th>  <td>555 77 854</td></tr><tr>  <td>555 77 855</td></tr></table></body></html>

2、本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。

<html><body><h4>没有 cellpadding：</h4><table border="1"><tr>  <td>First</td>  <td>Row</td></tr>   <tr>  <td>Second</td>  <td>Row</td></tr></table><h4>带有 cellpadding：</h4><table border="1" cellpadding="10"><tr>  <td>First</td>  <td>Row</td></tr>   <tr>  <td>Second</td>  <td>Row</td></tr></table></body></html>

3、本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格；

如何向表格添加背景；

如何向一个或者更多表格单元添加背景。

<html><body><table width="400" border="1" bgcolor="red"> <tr>  <th align="left" >消费项目....</th>  <th align="right">一月</th>  <th align="right" background="/i/eg_bg_07.gif">二月</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>

表格标签

表格描述<table>定义表格<caption>定义表格标题。<th>定义表格的表头。<tr>定义表格的行。<td>定义表格单元。<thead>定义表格的页眉。<tbody>定义表格的主体。<tfoot>定义表格的页脚。<col>定义用于表格列的属性。<colgroup>定义表格列的组。

二、列表

无序列表

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

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

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

浏览器显示如下：

Coffee
Milk

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

有序列表

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

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

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

浏览器显示如下：

Coffee
Milk

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

实例：

1、本例演示不同类型的有序列表和如何嵌套列表。

<html><body><h4>数字列表：</h4><ol> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li></ol>  <h4>字母列表：</h4><ol type="A"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li></ol>  <h4>小写字母列表：</h4><ol type="a"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li></ol>  <h4>罗马字母列表：</h4><ol type="I"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li></ol>  <h4>一个嵌套列表：</h4><ul> <li>苹果</li> <li>香蕉</li> <li>柠檬    <ul>    <li>红茶</li>    <li>绿茶</li>    </ul> </li></ul>  </body></html>

列表标签

标签描述<ol>定义有序列表。<ul>定义无序列表。<li>定义列表项。<dl>定义定义列表。<dt>定义定义项目。<dd>定义定义的描述。<dir>已废弃。使用 <ul> 代替它。<menu>已废弃。使用 <ul> 代替它。

0 0