web前端之tab表格布局（四）----表格布局

最新推荐文章于 2024-06-04 16:29:35 发布
最新推荐文章于 2024-06-04 16:29:35 发布
阅读量7.9k 收藏 6
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq939782569/article/details/64905902
版权 
<!DOCTYPE html>
<html>
  <head>
    <title>tab1.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
    <p>
每个表格从一个 table 标签开始。 
每个表格行从 tr 标签开始。
每个表格的数据从 td 标签开始。
border代表的意思是表格线的宽度
</p>

<h4>一列:</h4>
<table border="1">
<tr>
  <td>100</td>
</tr>
</table>

<h4>一行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<h4>两行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

<h4>两行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>
<h4>三行三列</h4>
<table border="2">
    <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>

<!DOCTYPE html>
<html>
  <head>
    <title>tab1.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
  <p>
    没有边框的表格的两种表现形式
  </p>
  <h4>这个表格没有边框:</h4>
<table>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

<h4>这个表格没有边框:</h4>
<table border="0">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>
  </body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>tab1.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</head>

<body>
    <p>
    th表格的头
    有垂直以及水平的
    </p>
    <h4>水平标题:</h4>
    <table border="1">
        <tr>
            <th>Name</th>
            <th>Telephone</th>
            <th>Telephone</th>
        </tr>
        <tr>
            <td>Bill Gates</td>
            <td>555 77 854</td>
            <td>555 77 855</td>
        </tr>
    </table>

    <h4>垂直标题:</h4>
    <table border="1">
        <tr>
            <th>First Name:</th>
            <td>Bill Gates</td>
        </tr>
        <tr>
            <th>Telephone:</th>
            <td>555 77 854</td>
        </tr>
        <tr>
            <th>Telephone:</th>
            <td>555 77 855</td>
        </tr>
    </table>
    <h4>综合:</h4>
    <table border="1">
        <tr>
            <th></th>
            <th>Telephone</th>
            <th>Telephone</th>
        </tr>
        <tr>
            <th>First Name:</th>
            <td>Bill Gates</td>
        </tr>
        <tr>
            <th>Telephone:</th>
            <td>555 77 854</td>
        </tr>
        <tr>
            <th>Telephone:</th>
            <td>555 77 855</td>
        </tr>
    </table>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>tab1.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</head>

<body>
<p>
    带有标题的表格
    caption标题标签
</p>
    <table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>tab1.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</head>

<body>
<p>
    跨行跨列的表格单元格
    th 属性 colspan跨两行
    th 属性 rowspan跨两列
</p>
<h4>单元格跨两格:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>
​
<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>
​
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>tab6.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
    <p>表格的复杂形式，表格中添加复杂的元素 例如：表格嵌套表格，表格嵌套列表等复杂的元素
        ul是列表，li无序列表
        tr 行
    </p>
    <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>

<!DOCTYPE html>
<html>
<head>
<title>tab7.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</head>

<body>
    <p>
        table cellpadding表格的属性内边距
                        默认是没有边距的
    </p>
    <h4>没有单元格边距:</h4>
    <table border="1">
        <tr>
            <td>First</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>Second</td>
            <td>Row</td>
        </tr>
    </table>

    <h4>有单元格边距:</h4>
    <table border="1" cellpadding="10">
        <tr>
            <td>First</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>Second</td>
            <td>Row</td>
        </tr>
    </table>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>tab7.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</head>

<body>
    <p>
        table cellspacing外边距
    </p>
    <h4>没有单元格间距:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>单元格间距="0":</h4>
<table border="1" cellspacing="0">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>单元格间距="10":</h4>
<table border="1" cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>
哎吆我呸
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
各种web的tab样式大全
03-04
这是web各种tab的实例，希望需要的人可以用上！
CSS基础：table的4个标签的样式详解（6000字长文！附案例）
u013179804的博客
04-19 5480
之前在 HTML 基础部分，我们讲解了表格的结构和写法。简单回顾下。包含等表格部分。和分别包含多个行。行中可以包含或单元格，用来显示表格的标题或数据。本文，我们来给它们增加一些漂亮的样式。图为增加样式前，增加样式后的效果，是不是确实漂亮多了。ok，那我们一起来看看这些表格标签的样式属性吧。
MySQL--操作数据库方式
zxn200125的博客
12-25 666
介绍手动操作数据库与命令操作数据库方式，包括DDL、DML、DLL、DQL
基于tabs实现页面布局
最新发布
hongxiaomeng的博客
06-04 380
前端表格日期和时间分行显示
JavaGreenhand520的博客
07-31 1003
前端代码 我在项目中前端用的是element admin <el-table-column label="创建时间" align="center" prop="createtime"> <template slot-scope="scope"> <div>{{handleDate(scope.row.createtime)}}</div> <div>{{handleTime(scope.row.createtime
【vue】vant + vux UI组件实现【tab栏+日历】日期选择器
yapeee的博客
07-11 1万+
问题描述 HMS需要实现产品的一个日期选择器。要求如下，小于等于7天的日期范围显示横向滑动的日期栏，大于7天的日期范围则要在日期栏右侧固定显示一个日历icon，点击显示日历，且日期上显示有无号的标志（可认为是该日期的一个特殊标识） 完整实例 https://github.com/yapeee/vue_points 效果展示1： 效果展示2： 重难点实现 1.日期t...
tab表计算
kylin_learn的博客
07-12 342
表计算类型：汇总/差异/百分比差异/总额百分比/排序/百分位 etc 表计算依据： 表(横穿）：范围：一行之间所有单元格比较；方向：一行内从左到右（计算差值的时候第二个减第一个 表(向下)：范围：一列之间所有单元格比较；方向：一列内从上到下（计算差值的时候第二个减第一个 表(横穿，然后向下）：范围：整个表所有单元格比较；方向：一行内从左到右，然后走蛇字形（计算差值的时候第二个减第一个 表...
WEB 门户网站开发常用UI 之Tab
09-12 836
以下代码来自源码爱好者，
WebTab- 一个提高工作效率的插件
qq_52683382的博客
05-21 5993
一款能提升你的工作效率的页面插件，亲测该ChatGPT能高效的水论文，代码修复，资料查询等。
五种前端布局之table布局
热门推荐
qq_39877681的博客
11-18 2万+
前端基本布局五种前端布局table布局float布局 五种前端布局 table布局、float布局、absolute布局、flexbox布局、grid布局 table布局 父级容器—display: table 子级容器—display:table-cell (1) 空间平均划分：子级容器默认是自动平分宽度沾满父级容器； <body> <div class="box"> <div class="left"></div>
内置30+神级功能的神器WebTab（插件）
weixin_43101805的博客
05-10 830
比起hao123这种起始页，WebTab还是非常简洁的，除了一些常用网站推荐外，没啥太多花哨的网站，实用性拉满！主页的壁纸、显示风格、搜索引擎、显示的间距等都可根据自己的设备和使用习惯自己DIY，如果你使用的有一些特别小众的搜索引擎，也可自行添加，起始页中，但是自己又不喜欢的页面，可以一键删除，替换为自己常用的，用起来超级方便。如果你没有强迫症的话，拿来看看门户网站，浏览个资讯，倒是蛮不错的选择。今天，要给大家推荐的是一款以插件形式存在的起始页，需要安装后方能使用。另外，软加还加入了一些AI小工具，
CSS样式漂亮Tab页
09-28
一个很漂亮的Tab 标签 切换样式 非常经典的东东
多款精美的tab页签样式任你挑选
05-12
多款好看的tab页签样式，希望对你有所帮助
软件工程实务课程心得：WebTab浏览器起始页项目
weixin_64606625的博客
06-27 921
「QiuYu WebTab」是柳州职业技术学院学生陈秋余个人独立开发的Web项目。 WebTab浏览器起始页是一个集成搜索功能和多个APP的个性化浏览器起始页项目。
【前端修炼场】— table 表格的构建
热爱生活，积极向上的阿酱！
01-10 2845
本篇文章我将带领诸位学习如何在页面中添加 table 表格。我们往往通过表格的形式去更好的展示我们所需要展示的内容。话不多说，诸君准备好了么？打开 VSCode 和我一起操作吧！很开心与你们相遇，相遇即是缘，祝愿我们都越来越好！
web开发之Tab页的常见实现方法
丿灬安之若死
07-19 1766
tab和内容分离 布局: 用一个大的container div容器包裹住tab-control和tab-content两个div块 给每一个tab-control的项(a标签的href属性)设置锚点 给每一个tab-content的项,设置id属性 id属性名需与上述锚点一一对应 &lt;div class="container"&gt; &lt;...
常见的五种前端页面布局（table布局、float布局、absolute布局、flex布局、grid布局）
engineer_z的博客
08-16 2888
前端页面布局
DWZ富客户端框架使用手册
DWZ提供了一系列组件扩展，如Tab组件、Accordion（折叠面板）、容器高度自适应、CSSTable（CSS样式表格）以及Table扩展，它们大大丰富了页面布局和数据展示的方式。在线编辑器、分页组件和ajaxTodo扩展则增强了数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值