HTML 表格 登录

HTML 表格

表格在我们日常生活中很常见,但是怎么在我们网页中输出表格呢?


<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。


让我们做个最简单的表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="10">
    <tr>
        <td>1月份</td>
        <td>¥100</td>
    </tr>
    <tr>
        <td>二月份</td>
        <td>¥200</td>
    </tr>
</table>
</body>
</html>

程序运行结果:

1.jpg



cellspacing,单元格之间的距离

cellpadding,文字和单元格边框的距离 都是以像素为单位

border  给文本加边框   将border设置成 border=0 表格将不显示边框

上面的三个属性值是可以自己设的,根据自己的要求来设置


HTML 表格表头

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

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="10">
    <th>月份</th>
    <th>金额</th>
    <tr>
        <td>1月份</td>
        <td>¥100</td>
    </tr>
    <tr>
        <td>二月份</td>
        <td>¥200</td>
    </tr>
</table>
</body>
</html>

程序运行结果:

7.jpg


colspan和rowspan

通过给<td>标签增加colspan和rowspan两个属性,可以在横向和纵向合并单元格

实例

没合并之前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="20">
    <tr>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
    <tr>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
    <tr>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
</table>
</body>
</html>

程序运行结果:

2.jpg


合并之后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="20">
    <tr>
        <td colspan="2">单元格</td>
        <td>单元格</td>
    </tr>
    <tr>
        <td rowspan="2">单元格</td>
        <td>单元格</td>
        <td rowspan="2">单元格</td>
    </tr>
    <tr>
        <td>单元格</td>
    </tr>
</table>
</body>
</html>

再看代码运行结果:

2.jpg

找找规律吧


更多实例

本例演示一个没有边框的表格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<h4>这个表格没有边框:</h4>
<table>
    <tr>
        <td>200</td>
        <td>300</td>
    </tr>
    <tr>
        <td>500</td>
        <td>600</td>
    </tr>
</table>
<h4>这个表格没有边框:</h4>
<table border="0">
    <tr>
        <td>200</td>
        <td>300</td>
    </tr>
    <tr>
        <td>500</td>
        <td>600</td>
    </tr>
</table>
</body>
</html>

程序运行结果:

0.jpg


实例

本例演示如何显示在不同的元素内显示元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<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>apples</li>
                <li>bananas</li>
                <li>pineapples</li>
            </ul>
        </td>
        <td>HELLO</td>
    </tr>
</table>
</body>
</html>

代码运行结果:

1.jpg


HTML 表格标签

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



下一节
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <table border="1" cellspacing="0" cellpadding="20"> <tr> <td>1月份</td> <td>¥100</td> </tr> <tr> <td>二月份</td> <td>¥200</td> </tr> </table> </body> </html>
提交 重置代码
章节 评论 笔记 课件
  • 取消 回复 发送
  • 取消 发布笔记 发送