HTML中表格相干见识的介绍（代码实例）-百分百源码网

HTML中表格相干见识的介绍（代码实例）

发布时间：09/01 来源：未知浏览：关键词：

本篇文章给大家带来的内容是关于HTML中表格相关知识的介绍（代码实例），有必然的参照价值，有需要的伴侣可以参照一下，但愿对你有所帮忙。

制作网页时，要合理计划网页规划。比方，在网页中增加一个表格，可分为上、中、下三部分，上部存置网页标题或LOGO图片，中心部分是整个网页的主体内容，底部就是相关制作信息。此外，单元格里还可再增加单元格，将内容分类别、分层次合理计划。

表格标签--table

是一个双标签。一个表格中包括<table>、<tr>、<td>三个根本元素。首标签<table>和尾标签</table>表示一个表格的开端和完毕。'tr=table row'用于表示一行的开端和完毕,'td=table data'用来表示行中个单元格的开端和完毕。

<table>
<tr>
    <td>单元格内容</td>
    <td>单元格内容</td>
</tr>
<tr>
    <td>单元格内容</td>
    <td>单元格内容</td>
</tr>
...
</table>

表格的标题--caption

有一种非凡的单元格叫做标题单元格，位于表格的第一行，标题单元格是没有边框的，默许居中显示。

<caption>表格的标题</caption>

表格边框--border

默许状况下，表格不显示边框。为了更好的区分内容，可以设定表格边框宽度大小，

<table border='边框属性'>

表格内文字与边框的间隔--cellpadding

默许状况下，文字紧贴边框。通过cellpadding可以调整文字与边框之间的间隔

<table cellpadding='文字与边框的间隔'>

表格中单元格之间的间隔--cellspacing

表格中单元格之间的间隔也可以转变。

<table cellspacing='单元格之间的间隔'>

单元格背景图像--background

<table background='图片'>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小白</title>
</head>
<body>
<p>默许状况下的表格</p>
<table border="2" align="center">
    <caption>亚洲</caption>
    <tr>
        <td>我国</td>
        <td>北京</td>
        <td>1949年10月1日</td>
    </tr>
    <tr>
        <td>缅甸</td>
        <td>内比都</td>
        <td>1948年1月4日</td>
    </tr>
</table>
<hr/>
<p>设定属性后的表格</p>
<!--bgcolor：行背景色彩-->
<table cellpadding="15" cellspacing="10" border="2" bgcolor="#8fbc8f" align="center">
    <caption>亚洲</caption>
    <tr>
        <td>我国</td>
        <td>北京</td>
        <td>1949年10月1日</td>
    </tr>
    <tr>
        <td>缅甸</td>
        <td>内比都</td>
        <td>1948年1月4日</td>
    </tr>
</table>
</body>
</html>

行合并属性--rowspan

在制作一些复杂的表格时，需要用到单元格合并

<td row='需要合并的行数'>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单元格行合并</title>
</head>
<body>
<table border="1" align="center" width="600" height="300">
    <caption>招生简章</caption>
    <tr>
        <td rowspan="3">根基科目</td>
        <td>数学</td>
    </tr>
    <tr>
        <td>外语</td>
    </tr>
    <tr>
        <td>政治</td>
    </tr>
    <tr>
    <td>专业课</td>
    <td bgcolor="#bc8f8f">100</td>
</table>
</body>
</html>

列合并属性--colspan

在制作一些复杂的表格时，需要用到单元格合并

<td row='需要合并的列数'>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单元格列合并</title>
</head>
<body>
<table border="1" align="center" width="600" height="300" cellpadding="30">
    <tr>
        <td colspan="3" align="center">西安</td>
    </tr>
    <tr>
        <td>长安区</td>
        <td>雁塔区</td>
        <td>碑林区</td>
    </tr>
    <tr>
        <td>新城区</td>
        <td>高新区</td>
        <td>莲湖区</td>
    </tr>

</table>
</body>
</html>

表格的嵌套

一个表格内部包括其他标签，用表格来排版页面，可以使页面各个部分互不冲突，团体构造美丽。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格嵌套</title>
</head>
<body>
<table bgcolor="#8fbc8f" align="center">
    <caption>示例</caption>
    <tr>
        <td>昙花</td>
        <td>
            <img src="flower_02.jpg" height="300" width="200">
        </td>
        <td>
            <img src="flower_02.jpg" height="300" width="200">
        </td>
    </tr>
    <tr>
        <td>阅读器</td>
        <td>
            <a href="http://www.baidu.com" style="color: #f10180">baidu</a>
        </td>
        <td bgcolor="#bc8f8f">
            <table border="1">
                <tr>
                    <td>baidu贴吧</td>
                    <td>baidu网盘</td>
                    <td>baidu图库</td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>