制作网页时，要合理规划网页布局。比如，在网页中添加一个表格，可分为上、中、下三部分，上部存放网页标题或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>

<div>默认情况下的表格</div>

<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/>

<div>设置属性后的表格</div>

<!--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">百度</a>

        </td>

        <td bgcolor="#bc8f8f">

            <table border="1">

                <tr>

                    <td>百度贴吧</td>

                    <td>百度网盘</td>

                    <td>百度图库</td>

                </tr>

            </table>

        </td>

    </tr>

</table>

</body>

</html>

python大佬养成计划----HTML网页设计（表格）的更多相关文章

  1. python大佬养成计划----HTML网页设计（序列）

    序列化标签 1.有序标签--ol和li 有序列表标签是<ol>,是一个双标签.在每一个列表项目前要使用<li>标签.<ol>标签的形式是带有前后顺序之分的编号.如果 ...

  2. python大佬养成计划----flask_bootstrap装饰网页

    flask_bootstrap Bootstrap 是 Twitter 开发的一个开源框架,它提供的用户界面组件可用于创建整洁且具有吸引力的网页,而且这些网页还能兼容所有现代 Web 浏览器. Boo ...

  3. python大佬养成计划----基于flask_sqlalchemy的网页显示数据库信息

    网页显示数据库信息 使用我们刚学习的flask_sqlalchemy,在网页中显示数据库表中的数据.在开始运行程序前,确保数据库中执行过创建表和创建用户的操作,详见链接描述. # 模板文件templa ...

  4. python大佬养成计划----HTML DOM

    什么是DOM? DOM (Document Object Model) 译为文档对象模型,是 HTML 和 XML 文档的编程接口.HTML DOM 定义了访问和操作 HTML 文档的标准方法.DOM ...

  5. Web前端开发工程师养成计划【转载】

    Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...

  6. 2019.12.12网页设计大赛&2019.12.13程序设计大赛观后感

    有幸参加了一次网页设计大赛和程序设计大赛,其实在大一的时候就参加过一次程序设计大赛,那时候也没怎么听,现在又有了一次机会来听,这次就认真的听了这两次的比赛,也有很多的感悟. 1.要学习完成一个任务的多 ...

  7. [python] 常用正则表达式爬取网页信息及分析HTML标签总结【转】

    [python] 常用正则表达式爬取网页信息及分析HTML标签总结 转http://blog.csdn.net/Eastmount/article/details/51082253 标签: pytho ...

  8. 无障碍网页设计（WCAG2.0）

    无障碍化是指无论健全人还是残疾人,年轻人还是老年人都可以平等地获取互联网上的信息和服务.无障碍化网站建设不单可以增加网站的受益群体,更是一个有情怀.有担当的互联网企业的责任,也是一个互联网从业人员应该 ...

  9. css+div网页设计（二）--布局与定位

    在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子 ...

随机推荐

  1. CircleCi 不更新某个分支的两种方法

    概述 今天我发现我的所有项目的 CircleCi 部署全部都会更新 gh-pages 分支.找了好久,终于找到了不更新的方法.于是我总结了一下,记录下来,供以后开发时参考,相信对其他人也有用. onl ...

  2. Pycharm断点调试入门

    断点调试是在开发过程中常用的功能,能清楚看到代码运行的过程,有利于代码问题跟踪.对我这个小白开发来说,还有一个作用是快速熟悉代码,拿到别人写的代码,有时看不太懂或看的很吃力,光这样看很无感,但是通过断 ...

  3. Linux常用命令：修改文件权限chmod 754/744

    常用命令:chmod 777  文件或目录 chmod  777 /etc/squid 运行命令后,squid文件夹(目录)的权限就被修改为777(可读可写可执行). Linux系统中,每个用户的角色 ...

  4. 【VS开发】ActiveX控件如何定制属性？

    在很多场合下会存在这样的需求,那就是使用方在实际使用控件之前就想控件已经做了相应的处理比如加载的控件版本不正确等,或者需要在加载时才确定能够使用的功能集:这个时候传统的配置文件已经无法满足这种类型的需 ...

  5. Vim命令合集（四）

    Vim命令合集 命令历史 以:和/开头的命令都有历史纪录,可以首先键入:或/然后按上下箭头来选择某个历史命令. 启动vim 在命令行窗口中输入以下命令即可 vim 直接启动vim vim filena ...

  6. 2019JAVA第五次实验报告

    Java实验报告 班级 计科二班 学号 20188442 姓名 吴怡君 完成时间2019/10/11 评分等级 实验四 类的继承 实验目的 理解抽象类与接口的使用: 了解包的作用,掌握包的设计方法. ...

  7. 小记---------spark组件与其他组件的比较 spark/mapreduce ;spark sql/hive ; spark streaming/storm

    Spark与Hadoop的对比   Scala是Spark的主要编程语言,但Spark还支持Java.Python.R作为编程语言 Hadoop的编程语言是Java    

  8. POJ 2955 Brackets 区间DP 入门

    dp[i][j]代表i->j区间内最多的合法括号数 if(s[i]=='('&&s[j]==')'||s[i]=='['&&s[j]==']') dp[i][j] ...

  9. python-day12(正式学习)

    目录 可变长参数 可变长形参之* 可变长实参之* 可变长形参之** 可变长实参之** 可变长参数应用 命名关键字形参 函数对象 四大功能 引用 当作参数传给一个函数 可以当作函数的返回值 可以当作容器 ...

  10. $APIO~2019$ 游记

    我是鸽子. Upd:我全国倒数第一稳了. Uupd:时间过去好久了,这段时间发生很多事,比如NOIP没了... APIO时候的事也记得不是很清楚了,随便写点颓废资料吧: 如果想吃离酒店最近的一家火锅店 ...