HTML+CSS_02-表格标签和传统布局

最新推荐文章于 2020-01-27 20:24:00 发布
最新推荐文章于 2020-01-27 20:24:00 发布
阅读量191 收藏
点赞数
分类专栏： PYTHON
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mhabbyo/article/details/87109382
版权

html 表格

 

1 <table> 标签： 声明一个表格，他的常用属性如下： width 宽 height 高

  • border  表格的边框

  • cellpadding 单元格内容与边框的距离

  • cellspacing 单元格与单元格之间的距离

  • align 整体表格相对于浏览器窗口水平对齐方式 left | center | right

 

2 <tr> 标签 定义表格中的一行

3 <td> <th> 标签 定义一行中的一个单元格，td代表普通单元格，th代表表头单元格，他们常用属性如下：

  • align 设置单元格中内容的水平对其方式 left | center | right 三个选项

  • valign 设置单元格中内容的垂直对齐方式 top | middle | bottom

  • colspan 设置单元个水平合并，设置值为数值

  • rowspan 设置单元格垂直合并，设置值是数值

 

# 居中参数验证

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>table</title>

</head>

<body>

 

    <h1>table</h1>

 

    <table border="2" width="300" height="200" align="center">

        <tr>

            <td align="center" valign="top">1</td>

            <td align="center">2</td>

            <td align="center">3</td>

        </tr>

 

        <tr>

            <td align="center" valign="middle">1</td>

            <td align="center">2</td>

            <td align="center">3</td>

        </tr>

 

        <tr>

            <td align="center" valign="bottom">1</td>

            <td align="center">2</td>

            <td align="center">3</td>

        </tr>

    </table>

 

</body>

</html>

 

 

 

 

 

# 合并属性参数验证

 

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>table</title>

</head>

<body>

 

    <h1>table</h1>

   <!-- table>(tr>td*5)*6  tab 创建一个5列6行的表格 -->

 

    <table border="1" width="600" height="300" align="center">

        <tr>

            <!-- 第一行合并为一行 文字居中-->

            <td colspan="5" align="center">BASIC_INFO</td>

            <!--

            <td></td>

            <td></td>

            <td></td>

            <td></td>

            -->

        </tr>

        <tr>

            <td width="20%"></td>

            <td width="20%"></td>

            <td width="20%"></td>

            <td width="20%"></td>

            <!-- 合并最后一列为一列，列数根据上面定义的进行计算，插入对应的图片-->

            <td rowspan="5"><img src="images/22.png" alt="cat_pic"></td>

        </tr>

        <tr>

            <td></td>

            <td></td>

            <td></td>

            <td></td>

        </tr>

        <tr>

            <td></td>

            <td></td>

            <td></td>

            <td></td>

        </tr>

        <tr>

            <td></td>

            <td></td>

            <td></td>

            <td></td>

        </tr>

        <tr>

            <td></td>

            <td></td>

            <td></td>

            <td></td>

        </tr>

    </table>

 

</body>

</html>

 

 

 

 

 

# 显示出来是矩阵的  使用了边距 和单元格之间的距离  cellpadding="20" cellspacing="20"

 

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>table</title>

</head>

<body>

<h1>table</h1>

<table border="1" cellpadding="20" cellspacing="20">

    <tr>

        <td>1</td>

        <td>2</td>

        <td>3</td>

        <td>4</td>

        <td>5</td>

    </tr>

    <tr>

        <td>1</td>

        <td>2</td>

        <td>3</td>

        <td>4</td>

        <td>5</td>

    </tr>

    <tr>

        <td>1</td>

        <td>2</td>

        <td>3</td>

        <td>4</td>

        <td>5</td>

    </tr>

    <tr>

        <td>1</td>

        <td>2</td>

        <td>3</td>

        <td>4</td>

        <td>5</td>

    </tr>

    <tr>

        <td>1</td>

        <td>2</td>

        <td>3</td>

        <td>4</td>

        <td>5</td>

    </tr>

    <tr>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

    </tr>

</table>

</body>

</html>

 

 

页面布局概述

 

页面布局也叫排版，指按照意图把图片和文字邮寄的排列到页面上，布局的方式有两种：

1 table 布局 将页面划分为多个单元格，然后将文字图片填充到其中，隐藏表格的边框，从而实现布局，是传统布局。主要使用在广告邮件的页面中，主流的布局方式不用这种

2 html+css布局（div+css）通过css样式来设置布局文字图片等元素，需要用到css盒子模型，css盒子类型，css浮动，css定位，css背景图定位等知识来布局，相对复杂，是主流的布局方式

 

 

table 布局

  1. 按照设计图的尺寸来设置表格的宽高和单元格的宽高

  2. 将表格border/cellpadding/cellspacing全部设置为0，表格的边框和间距就不占有页面空间，它只起到划分空间的作用

  3. 针对局部复杂的布局，可以在单元格里面再嵌套表格，嵌套表格划分局部的空间

  4. 单元格中的元素或者嵌套表格的align和valign设置对齐方式

  5. 通过属性或者css样式设置单元格中元素的样式

 

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>resume</title>

</head>

<body topmargin="0"><!-- 顶格 上面不留空间 -->

 

<!-- table>tr>td*4 + tab-->

<table border="1" width="800" height="800" align="center" cellpadding="0" cellspacing="0">

    <tr>

        <td width="260" valign="top"><!-- 在表格中嵌套一个表格 -->

            <table width="200" border="0" cellpadding="0" cellspacing="0" align="center">

 

                <tr>

                    <td height="100"></td>

                </tr>

                <tr>

                    <td align="right"><img src="images/22.png"></td>

                </tr>

                <tr>

                    <td align="right">habby_yang</td>

                </tr>

                <tr>

                    <td align="right">15669012590</td>

                </tr>

                <tr>

                    <td align="right">habby_yang@hotmail.com</td>

                </tr>

            </table>

        </td> <!-- 2 td in table,watch -->

        <td width="30"></td>

        <td width="480">

            <table width="480" border="1"cellspacing="0" cellpadding="0">

                <tr><td height="20"></td></tr>

                <tr>

                    <td><img src="images/resume.png"></td>

                </tr>

            </table>

            <br />

            <hr /> <!-- heng transverse line -->

            <br />

 

            <table width="480" height="80" border="1" cellpadding="0" cellspacing="0">

 

                <tr>

                    <td colspan="2" align="center"><b>PERSONAL_INFO</b></td> <!-- b标签进行加粗处理 -->

                </tr>

                <tr>

                    <td>NAME:HABBY_YANG</td>

                    <td>ADDRESS:HENAN</td>

                </tr>

                <tr>

                    <td>GENDER:MALE</td>

                    <td>HEIGHT:175</td>

                </tr>

                <tr>

                    <td>NATION:CHINESE</td>

                    <td>WEIGHT:90KG</td>

                </tr>

                <tr>

                    <td>BIRTH:19871210</td>

                    <td>TEL:15669012590</td>

                </tr>

                <tr>

                    <td>ADDRESS:HANGZHOU</td>

                    <td>MAJOR:DBA</td>

                </tr>

                

                <tr>

                    <td><b>EDUCATION_AND_WORK_HISTORY</b></td>

                </tr>

 

                <tr>

                    <td><b>2008-2009 SHANGHAI YTO</b></td>

                </tr>

 

                <tr>

                    <td><b>2008-2009 SHANGHAI YTO</b></td>

                </tr>

 

 

            </table>

        </td>

        <td width="30"></td>

    </tr>

</table>

</body>

</html>

 

 

 

 

 

 

 

 

mhabbyo
关注
专栏目录
二、Mysql_Html_Css_Jdbc-（进阶提升、新手必看）
03-01
【CSS】CSS（Cascading Style Sheets）用于控制网页的样式和布局。它可以定义颜色、字体、间距、布局和其他视觉效果，使网页具有美观的外观。CSS通过选择器和规则来定位HTML元素并应用样式，实现页面的分离式设计，...
4.表格标签和传统布局
测试进阶之路
10-31 298
一。表格 1.<table>标签：声明一个表格，它的常用属性如下： a。border属性 定义表格的边框，设置值是数值 b。cellpadding属性 定义单元格内容与边框的距离，设置值是数值 c。cellspacing属性 定义单元格与单元格之间的距离，设置值是数值 d。align属性 设置整体表格相对于浏览器窗口的水平对齐方式，设置值有：left c...
由CSS+div来替代表格的布局
彩田专栏
06-07 5914
1.CSS布局常用的方法：float : none | left | right 取值：none : 默认值。对象不飘浮 left : 文本流向对象的右边 right : 文本流向对象的左边它是怎样工作的，看个一行两列的例子xhtml:   这里是第一列  这里是第二列  /*这是违背web标准意图的，只是想说明在它下面的元素需要清除浮动*/CSS: #wrap{ width
HTML+CSS网页设计与布局从入门到精通 PDF
03-26
传统的方法包括表格布局，但现代网页设计更倾向于使用流式布局（使用百分比单位）、响应式布局（根据设备屏幕尺寸调整布局）以及Flexbox和Grid。Flexbox提供了一种更为灵活的方式处理一维布局（行或列），可以轻松地...
制作一个简单HTML传统端午节日网页（HTML+CSS）
08-10
- **CSS（Cascading Style Sheets）**：用于控制网页的外观和布局。通过选择器定位HTML元素并设置样式，比如字体大小、颜色、间距等。例如，使用`.classname`或`#idname`来定义特定元素的样式规则。 - **JavaScript...
html + css 入门教程
最新发布
02-18
- 原因：传统的网页布局多采用表格（Table）的方式，随着技术的发展，逐渐转向使用`<div>`标签进行布局，因此人们习惯性地称之为“DIV+CSS”。 - 正确表述：“xHTML+CSS”，即使用xHTML（扩展的超文本标记语言）与...
div+css模拟表格效果代码
10-30
通过使用DIV和CSS模拟表格效果，可以避免使用传统的HTML表格标签（如、、等）来布局页面，这在当前的Web开发中越来越受到推崇。因为使用DIV和CSS布局具有更好的灵活性和可控性，也更加符合Web标准，并且能够提供更好...
pycharm 中批量替换
mhabbyo的博客
11-10 4245
ctr + r 进行批量替换 方便快捷 比 refecter 更好用
ubuntu 16.04 安装 pymysql
mhabbyo的博客
11-07 1571
1 下载安装包                  https://pypi.org/project/PyMySQL/#files 2 升级 pip                       pip install --upgrade pip 3 使用 pip 进行安装      pip install 'PyMySQL-0.9.2-py2.py3-none-any.whl' 4 使用pym...
ubuntu 安装 sublime 失败
mhabbyo的博客
10-22 772
ubuntu 版本 16.0.4 安装 sublime  报错 ： snapd returned status code 400: Bad Request 解决办法： 1 rm -r /var/lib/apt/lists/* 2 apt update 3 apt upgrade 4 init 6   然后成功完成安装 ubuntu 的软件安装完成后，在软件管理器里面打开，固定到左...
HTML+CSS_05-CSS常用文本样式
mhabbyo的博客
02-13 356
css 文本设置   color 设置文字的颜色 color:red; font-size 设置文字的大小 font-size:12px; font-famaily 设置文字的字体 font-family:'Microsot Yahei'； font-style 设置文字是否倾斜 font-style:"normal"; 不倾斜 font-style:'ita...
python 基础教程第三版 -- 第十章 开箱即用 == 读取文件中的内容到一个字符串中的两种方式
mhabbyo的博客
01-27 270
## 读取文件中的内容到一个字符串中的两种方式get_text_1.pyget_text_2.py (python_scripts) [root@mha-1 python_scripts]# cat 3.txt habby_yang eagle_yang abby_yang From Habby Yang <habby_yang@163.com> Thu Dec 20 01:2...
HTML+CSS_07-盒子模型
mhabbyo的博客
02-27 269
元素在页面中显示成一个方块，类似一个盒子 需要设置的有： 盒子的宽度（width） 盒子的高度（height） 盒子的边框（border） 盒子的内容和边框之间的间距 （padding） 盒子与盒子之间的间距（margin） border-right:30px dotted #000; solid 实线 dotted 点线 dashed 虚线 ...
HTML+CSS_04-CSS基本语法
mhabbyo的博客
02-13 238
CSS 的作用是让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开。CSS 是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了 CSS ，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS,html文档变得更加简洁。   CSS 基本语法： 选择器{属性：值；属性：值；属性：值} 选择器是将样式和页面元...
HTML+CSS_03-表单标签
mhabbyo的博客
02-13 224
表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签以及属性用法如下： 1 &lt;form&gt;  定义整体的表单区域  action 定义表单数据提交地址 method 定义表单提交的方式 get+post 两种 2 &lt;label&gt;  为表单元素定义文字标注 3 &lt;input&gt; 定义通用的表单元素     tye属性 type="text"...
python 基础教程第三版 -- 第十章 开箱即用 == 使用 fileinput 处理多个文件
mhabbyo的博客
01-27 222
# 创建模板处理系统 (python_scripts) [root@mha-1 python_scripts]# cat template.py import fileinput, re # 与使用方括号扩起来的字段匹配 field_pat = re.compile(r'\[(.+?)\]') # 让我们把变量收集到这里： scope = {} # 用于调用 re.sub ...
HTML+CSS_01_html文档结构和常用标签
mhabbyo的博客
02-12 218
概述和介绍   html 的文档格式有三种 html4  html5 和 xhtml  在创建的时候可以进行选择  html5 新增了标签元素以及元素属性 HTML 语言是HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记值得是标签， 是一种用来制作网页的语言，保存的格式是一个html或者htm结尾的文本文件，一个hetml文...
HTML+CSS_06-CSS样式选择器
mhabbyo的博客
02-13 136
CSS 颜色表示方法： 1 颜色名称表示 red gold 2 rgb 表示 rgb(255,0,0) 表示红色 3 16进制数值表示，比如 ##ff0000 表示红色，可以简写为 #f00   常用CSS选择器种类： 1 标签选择器 影响范围大，尽可能使用在层级选择器中 div{color:red} 会影响到下面的所有使用到该标签的内容 2 ID选择器 通过id名来选择元素，元素的...
CSS布局：从Table到DIV+CSS的转变
本文档是关于使用DIV+CSS进行网页布局的经典教程，讲解了CSS样式的定义位置以及传统布局与CSS布局的区别。课程由讲师赵海海讲授，涵盖了Web标准构成、CSS2.0在网页设计中的作用，以及如何通过DIV+CSS实现表现与内容...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值