HTML 表格

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    每个表格从一个 table 标签开始。
    每个表格行从 tr 标签开始。
    每个表格的数据从 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>
</body>
</html>

javascript实现列表框图像浏览器 html列表框代码怎么写_HTML

 如果想要实现多行多列，代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <table border="1">
        <tr>
            <td>Row 1, cell 1</td>
            <td>Row 1, cell 2</td>
        </tr>
        <tr>
            <td>Row 2,cell 1</td>
            <td>Row 2,cell 2</td>
        </tr>
    </table>
    </body>
    </html>

javascript实现列表框图像浏览器 html列表框代码怎么写_HTML_02

HTML 表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：        

 代码如上，带border属性，表格会有一个边框。

默认为没有表格，即border=“0”.

HTML 表格表头

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

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

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <table border="1">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>
    </body>
    </html>

javascript实现列表框图像浏览器 html列表框代码怎么写_html_03

tr是在同一行的内容，td是一格中的内容，th是表头

实现水平标题和垂直标题：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h4>水平标题</h4>
    <table border="1">
        <tr>
        <th>Name</th>
        <th>Telephone</th>
        <th>Telephone</th>
        </tr>
        <tr>
            <td>Bob</td>
            <td>123456789</td>
            <td>987654321</td>
    </table>
    <br></br>
    <h4>垂直标题</h4>
    <table border="1">
        <tr>
        <th>Name</th>
        <td>Bob</td>
        </tr>
        <tr>
            <th>Telephone</th>
            <td>123456789</td>
        </tr>
        <tr>
            <th>Telephone</th>
            <td>987654321</td>
        </tr>
    </table>
    </body>
    </html>

javascript实现列表框图像浏览器 html列表框代码怎么写_html_04

 HTML 表格标题

使用caption标签实现

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h4>水平标题</h4>
    <table border="1">
        <caption>information</caption>
        <tr>
        <th>Name</th>
        <th>Telephone</th>
        <th>Telephone</th>
        </tr>
        <tr>
            <td>Bob</td>
            <td>123456789</td>
            <td>987654321</td>
    </table>
    <br></br>
    <h4>垂直标题</h4>
    <table border="1">
        <caption>information</caption>
        <tr>
        <th>Name</th>
        <td>Bob</td>
        </tr>
        <tr>
            <th>Telephone</th>
            <td>123456789</td>
        </tr>
        <tr>
            <th>Telephone</th>
            <td>987654321</td>
        </tr>
    </table>
    </body>
    </html>

javascript实现列表框图像浏览器 html列表框代码怎么写_自定义_05

实现表格跨行

通过在<th>标签中设置colspan实现跨行，rowspan实现跨列

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
<p>单元格跨两列</p>
    <table border="1">
        <tr>
            <th>Name</th>
            <th colspan="2">Telephone</th>
        </tr>
        <tr>
            <td>Bob</td>
            <td>123456789</td>
            <td>987654321</td>
        </tr>
    </table>
    <p>单元格跨两行</p>
    <table border="1">
        <tr>
            <th>Name</th>
            <td>Bob</td>
        </tr>
        <tr>
            <th rowspan="2">Telephone</th>
            <td>123456789</td>
        </tr>
        <tr>
            <td>987654321</td>
        </tr>
    </table>
    </body>
    </html>

javascript实现列表框图像浏览器 html列表框代码怎么写_html_06

 注：表格内部还可以嵌套表格

设置单元格边距 

在<table>标签中设置cellpadding来控制边距大小【padding填充】

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h4>没有单元格边距:</h4>
    <table border="1">
        <tr>
            <td>First</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>Second</td>
            <td>Row</td>
        </tr>
    </table>

    <h4>有单元格边距:</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>

javascript实现列表框图像浏览器 html列表框代码怎么写_HTML_07

 设置单元格间距

 通过在<table>使用Cellspacing 增加单元格之间的距离

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h4>没有单元格间距:</h4>
    <table border="1">
        <tr>
            <td>First</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>Second</td>
            <td>Row</td>
        </tr>
    </table>

    <h4>单元格间距="0":</h4>
    <table border="1" cellspacing="0">
        <tr>
            <td>First</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>Second</td>
            <td>Row</td>
        </tr>
    </table>

    <h4>单元格间距="10":</h4>
    <table border="1" cellspacing="10">
        <tr>
            <td>First</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>Second</td>
            <td>Row</td>
        </tr>
    </table>
    </body>
    </html>

javascript实现列表框图像浏览器 html列表框代码怎么写_html_08

 

javascript实现列表框图像浏览器 html列表框代码怎么写_html_09

HTML列表

列表可分为有序列表和无序列表

HTML无序列表

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

无序列表使用 <ul> 标签【unordered list无序列表】

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <ul>
        <li>apple</li>
        <li>banana</li>
        <li>pear</li>
    </ul>
    </body>
    </html>

javascript实现列表框图像浏览器 html列表框代码怎么写_HTML_10

HTML 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。【ordered list有序列表】

列表项使用数字来标记。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <ol>
        <li>apple</li>
        <li>banana</li>
        <li>pear</li>
    </ol>
    </body>
    </html>

 

javascript实现列表框图像浏览器 html列表框代码怎么写_html_11

HTML 自定义列表

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

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

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <dl>
        <dt>Coffee</dt>
        <dd>- black hot drink</dd>
        <dt>Milk</dt>
        <dd>- white cold drink</dd>
    </dl>
    </body>
    </html>

javascript实现列表框图像浏览器 html列表框代码怎么写_自定义_12

ul是unordered lists的缩写 (无序列表)

li是list item的缩写 （列表项目）

ol是ordered lists的缩写（有序列表）

dl是definition lists的英文缩写 (自定义列表)

dt是definition term的缩写 (自定义列表组)

dd是definition description的缩写（自定义列表描述）

nl是navigation lists的英文缩写 （导航列表）

tr是table row的缩写 （表格中的一行）

th是table header cell的缩写 （表格中的表头）

td是table data cell的缩写 （表格中的一个单元格）

不同类型的有序列表 

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h4>编号列表：</h4>
    <ol>
        <li>Apples</li>
        <li>Bananas</li>
        <li>Lemons</li>
        <li>Oranges</li>
    </ol>

    <h4>大写字母列表：</h4>
    <ol type="A">
        <li>Apples</li>
        <li>Bananas</li>
        <li>Lemons</li>
        <li>Oranges</li>
    </ol>

    <h4>小写字母列表：</h4>
    <ol type="a">
        <li>Apples</li>
        <li>Bananas</li>
        <li>Lemons</li>
        <li>Oranges</li>
    </ol>

    <h4>罗马数字列表：</h4>
    <ol type="I">
        <li>Apples</li>
        <li>Bananas</li>
        <li>Lemons</li>
        <li>Oranges</li>
    </ol>

    <h4>小写罗马数字列表：</h4>
    <ol type="i">
        <li>Apples</li>
        <li>Bananas</li>
        <li>Lemons</li>
        <li>Oranges</li>
    </ol>
    </body>
    </html>

javascript实现列表框图像浏览器 html列表框代码怎么写_html_13

不同类型的无序列表 

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h4>圆点列表：</h4>
    <ul style="list-style-type:disc">
        <li>Apples</li>
        <li>Bananas</li>
        <li>Lemons</li>
        <li>Oranges</li>
    </ul>

    <h4>圆圈列表：</h4>
    <ul style="list-style-type:circle">
        <li>Apples</li>
        <li>Bananas</li>
        <li>Lemons</li>
        <li>Oranges</li>
    </ul>

    <h4>正方形列表：</h4>
    <ul style="list-style-type:square">
        <li>Apples</li>
        <li>Bananas</li>
        <li>Lemons</li>
        <li>Oranges</li>
    </ul>
    </body>
    </html>

javascript实现列表框图像浏览器 html列表框代码怎么写_自定义_14