html表格及传统布局

最新推荐文章于 2024-10-07 18:35:46 发布
最新推荐文章于 2024-10-07 18:35:46 发布
阅读量1w 收藏 53
点赞数 9
分类专栏： html，css 文章标签： html表格及传统布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Duke10/article/details/80011699
版权

个人博客页面链接：http://www.shihao.online/（博客还在开发阶段，欢迎访问）

html表格

table常用标签
1、table标签：声明一个表格

2、tr标签：定义表格中的一行

3、td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格

table常用属性：
1、border 定义表格的边框

2、cellpadding 定义单元格内内容与边框的距离

3、cellspacing 定义单元格与单元格之间的距离

4、align 设置单元格中内容的水平对齐方式,设置值有：left | center | right

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

6、colspan 设置单元格水平合并

7、rowspan 设置单元格垂直合并

传统布局：
传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：

1、定义表格宽高，将border、cellpadding、cellspacing全部设置为0

2、单元格里面嵌套表格

3、单元格中的元素和嵌套的表格用align和valign设置对齐方式

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html表格</title>
</head>
<body>

    <!-- table>(tr>td*4)*4 -->
    <table border="1" cellpadding="10" cellspacing="10">
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
    </table>




    <h3>html表格</h3>
    <table border="1" width="500" height="300">
        <tr>
            <th>序号</th>
            <th>产品名称</th>
            <th>产品价格</th>
            <th>产品数量</th>
        </tr>
        <tr align="center">
            <td>1</td>
            <td>苹果</td>
            <td>RMB5.00</td>
            <td>1000</td>
        </tr>
        <tr align="center">
            <td>2</td>
            <td>橘子</td>
            <td>RMB10.00</td>
            <td>2000</td>
        </tr>
    </table>



    <h3>个人简历表</h3>

    <table border="1" width="600" height="300">
        <tr>
            <th colspan="5" align="left">基本情况</th>
        </tr>
        <tr>
            <td width="18%">姓名</td>
            <td width="18%"></td>
            <td width="18%">性别</td>
            <td width="18%"></td>
            <td rowspan="5"><img src="./images/person.png" alt="图片"></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>

效果图：
这里写图片描述

表格传统布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html表格传统布局</title>
    <style type="text/css">
        body{
            font-family: "微软雅黑"; 
        }

        .title1{
            color: #5f5f5f;
            font-size: 24px;
            font-weight: bold;
        }

        .title2{
            color: #5f5f5f;
            font-size: 18px;
            font-weight: bold;
        }

        td span{
            color: #5f5f5f;
            font-size: 16px;
            font-weight: bold;
        }

        table .font1{
            color: #5f5f5f;
            font-size: 16px;
        }

        .font2{
            color: #a7a6a6;
            font-size: 16px;
        }

        td{
            line-height: 30px;
        }
    </style>
</head>
<body>
    <table width="800" height="800" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td width="260" valign="top" bgcolor="#f2f2f2">
                <table width="260" border="0" cellpadding="0" cellspacing="0">
                    <tr height="100">
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td width="230" align="right"><img src="./images/person.png" alt="人物图片"></td>
                        <td width="30"></td>
                    </tr>
                    <tr>
                        <td align="right" class="title1">张达山</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td align="right" class="font2">18210898888</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td align="right" class="font2">zhangdasan@126.com</td>
                        <td></td>
                    </tr>
                </table>
            </td>
            <td width="30"></td>
            <td width="480" valign="top">
                <table width="480" border="0" cellpadding="0" cellspacing="0">
                    <tr height="75">
                        <td></td>
                    </tr>
                    <tr>
                        <td align="right"><img src="./images/resume.png" alt="图片"></td>
                    </tr>
                </table>

                <hr />  <!--画一条线-->

                <table width="480" height="180" border="0" cellpadding="0" cellspacing="0" class="font1">
                    <tr height="30">
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td colspan="2" class="title2"><b>个人基本情况</b></td>
                    </tr>
                    <tr>
                        <td><span>姓 名：</span>张达山</td>
                        <td><span>籍 贯：</span>北京昌平</td>
                    </tr>
                    <tr>
                        <td><span>性 别：</span>男</td>
                        <td><span>身 高：</span>175cm</td>
                    </tr>
                    <tr>
                        <td><span>民 族：</span>汉</td>
                        <td><span>体 重：</span>70kg</td>
                    </tr>
                    <tr>
                        <td><span>出生日期：</span>1992.03.28</td>
                        <td><span>电 话：</span>18210898888</td>
                    </tr>
                    <tr>
                        <td><span>专 业：</span>工业设计</td>
                        <td><span>现居住地：</span>昌平天通苑</td>
                    </tr>
                </table>

                <table width="480" height="180" border="0" cellpadding="0" cellspacing="0" class="font1">
                    <tr height="30">
                        <td></td>
                    </tr>
                    <tr>
                        <td class="title2">教育背景及工作经历</td>
                    </tr>
                    <tr>
                        <td><span>2008.09-2011.06 </span>北京邮电大学 工业设计专业</td>
                    </tr>
                    <tr>
                        <td><span>2011.06-2012.09</span>北京微创信息科技有限公司 任前端开发工程师</td>
                    </tr>
                    <tr height="30">
                        <td></td>
                    </tr>
                    <tr>
                        <td class="title2">所获证书</td>
                    </tr>
                    <tr>
                        <td><span>2009年：</span>荣获“高级美术设计师”证书</td>
                    </tr>
                    <tr>
                        <td><span>2009年：</span>荣获“优秀班干部”证书</td>
                    </tr>
                </table>

            </td>
            <td width="30"></td>
        </tr>
    </table>
</body>
</html>

效果图
这里写图片描述

Duke的专栏
关注
专栏目录
HTML——使用表格进行页面布局
笨鸟
10-23 1万+
简单的使用表格进行布局~
HTML表格三：用表格去实现网页的布局
weixin_44340137的博客
10-19 793
<!DOCTYPE html> <html> <head> <title>表格的跨行跨列删除练习题</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> </head> <body> <...
HTML表格布局
weixin_34228662的博客
08-17 621
一个后台展示页面需要一个子列可以动态划分出等份的行，如果是固定的还好，可以用rowspan解决，但是这里不固定，所以，只能在列中嵌套一个表了，然后再进行行遍历。 具体效果图-列表里边嵌套子表 代码： <html> <body> <h2 align="center">合并表格行或列</...
第三章 表格布局与表单交互
最新发布
2403_87197752的博客
10-07 1152
3.1 表格的概述HTML（HyperText Markup Language）表格是网页设计中用于展示数据的一种重要元素。它们通过标签来定义，并可以包含行（）、表头（）、单元格（）等子元素来组织数据。表格不仅限于显示数字或文本数据，还可以用来布局网页内容（尽管现代网页设计倾向于使用CSS进行布局，因为表格布局在响应式设计和可访问性方面存在局限性）3.1.1 表格的结构。
html页面表格布局6,HTML的表格应该怎样布局
weixin_29288313的博客
06-03 483
这次给大家带来HTML的表格应该怎样布局，布局HTML的表格注意事项有哪些，下面就是实战案例，一起来看一下。HTML 文档中的元素是一个接着一个排列的，只是简单地在在块级元素的前后加上拆行，是一种流水布局。但是，我们所见到的 Web 页面按照一定的规则布局排版的(通常是多列的)，所以就要借助一定的方法来实现这种布局，通常的解决方案是：使用区块元素 或 表格()来布局 Web 页面的内容。使用表格...
css table-layout.html
weixin_42193179的博客
03-14 391
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格布局</title> <style> table.auto { /*自动表格布局*/ ...
HTML表格样式及布局（table）
2201_75652841的博客
12-20 735
【代码】HTML表格样式及布局。
HTML表格布局实例讲解
12-13
这里我们将讨论一种传统的布局方法——使用HTML表格（`<table>`）。 表格布局虽然在过去被广泛用于网页设计，但如今已不再被视为最佳实践。主要原因是表格布局限制了灵活性，并可能导致内容在不同屏幕尺寸下的响应...
Dreamweaver CS6中使用表格进行网页布局.pdf
07-10
这种方法虽然传统，但对于初学者和需要快速原型设计的场合，仍然是一种实用的布局手段。然而，现代网页设计更倾向于使用CSS布局，如Flexbox或Grid，它们提供了更灵活和响应式的布局解决方案。但理解表格布局的基本...
实用的图文表格ui布局
06-01
总之，“实用的图文表格ui布局”涉及到HTML表格、CSS的flexbox布局以及JavaScript交互效果的综合运用。通过巧妙结合这些技术，设计师和开发者能够创建出既实用又美观的用户个人简介列表，提供出色的网页体验。在实践...
用div和ul标签画表格进行布局兼容火狐、ie6、ie7、Opera等浏览器
12-08
这个例子展示了如何利用这些HTML元素来创建一个具有表格功能的布局，并确保它在火狐（Firefox）、IE6、IE7以及Opera等不同浏览器中都能正常显示。 首先，我们看到`<div>`标签被用于创建一个容器，它通过`id="table...
layui-高级表格-soul-table功能-HTML源码
10-02
在IT行业中，HTML表格是网页布局中不可或缺的一部分，尤其在数据展示时，高效且美观的表格设计至关重要。layui是一款优秀的前端框架，它以其简洁、强大的特性受到开发者的喜爱。而soul-table是layui的一个扩展组件，...
HTML表格的基本布局
wj18740503137的博客
09-27 1152
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格布局</title> </head> <body> <table width="600" align="center" height="50" border="1" cellpadding="10" cellspacing="5" rules="all"> .
html网页 table布局实例,HTML用Table表格对网页布局
weixin_39928461的博客
06-10 4498
HTML是用于开发网页的“超文本标记语言”，今天我们一起来学习一下HTML+CSS网页布局中Table布局方式。常见的网页布局用CSS而言一般有经典行布局、经典列布局、双飞翼布局、圣杯布局等。今天小编教大家用Table表格布局。大家先来欣赏几个网页：这几个网页布局都挺好看的对吧，不过今天我们不深究网页如何做到那么好看，我们仅仅做网页如何布局。来看这张图：这个网页效果就是我们今天要做的。首先，我们仔...
html之表格详解及table表格实现页面布局
weixin_49855251的博客
01-18 1万+
html表格 1、table>标签：声明一个表格，它的常用属性如下： border属性 定义表格的边框，设置值是数值 cellpadding属性 定义单元格内容与边框的距离，设置值是数值 cellspacing属性 定义单元格与单元格之间的距离，设置值是数值 align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right 2、tr>标签：定义表格中的一行 3、和th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们
【HTML】-案例-利用表格制作网页
热门推荐
Liangqi0329的博客
09-29 1万+
在网页制作中，早期的网页比较喜欢用表格来进行页面布局，使得页面看上去也更整洁。在本文中，我们介绍的是一个用表格来布局的一个菜谱页面，效果如下： 可以看到，大体上，这是一个由五行三列的表格所构成的菜谱。所以，在初始设定时，我们可以把表格设成五行三列，然后再进行一些行和列的合并，就可以得到我们想要的效果。在本例中，我们将第一行的所有列合并，并将第一列的第二第三行合并，第一列的第四第五行合并。
HTML08使用table完成网站布局
qq_42731393的博客
05-14 665
/* 为了避免繁琐的合并单元格，我们可以采取表格嵌套的方式处理。 我们将网页看成一个大表格，然后将网页分块，分块的网页可以用表格中的一行来完成 如果是一行一列可以使用<tr><td>...</td></tr> 如果是一行多列，可以使用表格嵌套<tr><td><table>.....</table></td></tr> */ ...
html-mui-页面布局表格左右
jieweiwujie的博客
09-01 977
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>页面布局<...
两个表格-左右布局
weixin_45646663的博客
08-26 1041
<template> <div class="LeftRightLayout"> <!-- 患者列表来的异常数量弹窗 --> <div style="width:20%;height: 100%" v-if="textCode == 'JHTableList'"> <el-table :data="LabResult" border class="eltable" height='100%'
网页布局技术：表格与导航布局解析
在【部分内容】中，详细阐述了表格布局这一传统的布局方法。表格布局利用HTML的`<table>`元素，通过单元格(`<td>`)来组织和定位网页内容。虽然表格布局在早期网页设计中非常常见，但由于其对内容和样式分离的支持...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值