table 基础布局

最新推荐文章于 2023-10-09 09:49:31 发布
最新推荐文章于 2023-10-09 09:49:31 发布
阅读量93 收藏
点赞数
文章标签： java 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoshengjinbu/article/details/131256392
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .table {
            border-top: 1px solid #999;
            border-left: 1px solid #999;
            border-spacing: 0;
            /*去掉单元格间隙*/
        }

        .table td {
            padding: 10px 30px;
            border-bottom: 1px solid #999;
            border-right: 1px solid #999;
        }

        .item {
            /* border: solid 1px red; */
            width: 20vw;
            text-align: center;
        }
        .row .item:hover{
            background-color: antiquewhite;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <table class="table">
        <thead>
            <tr >
                <td class="item item1"> 分类</td>
                <td class="item" colspan="2">产品分类1</td>
                <td class="item" colspan="2">产品分类2</td>
            </tr>
        </thead>
        <tr class="row">
            <td class="item" rowspan="3">A类数据</td>
            <td class="item">1-2</td>
            <td class="item">1-3</td>
            <td class="item">1-4</td>
            <td class="item">1-5</td>
        </tr>
        <tr class="row">
            <td class="item">2-1</td>
            <td class="item">2-2</td>
            <td class="item">2-3</td>
            <td class="item">2-4</td>
        </tr>
        <tr class="row">
            <td class="item">3-1</td>
            <td class="item">3-2</td>
            <td class="item">3-3</td>
            <td class="item">3-4</td>
        </tr>
        <tr class="row">
            <td class="item" rowspan="3">B类数据</td>
            <td class="item">1-2</td>
            <td class="item">1-3</td>
            <td class="item">1-4</td>
            <td class="item">1-5</td>
        </tr>
        <tr class="row">
            <td class="item">2-1</td>
            <td class="item">2-2</td>
            <td class="item">2-3</td>
            <td class="item">2-4</td>
        </tr>
        <tr class="row">
            <td class="item">3-1</td>
            <td class="item">3-2</td>
            <td class="item">3-3</td>
            <td class="item">3-4</td>
        </tr>
    </table>
</body>

</html>
分类产品分类1产品分类2
A类数据1-21-31-41-5
2-12-22-32-4
3-13-23-33-4
B类数据1-21-31-41-5
2-12-22-32-4
3-13-23-33-4
xiaoshengjinbu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
table布局的总结
qq_21921805的博客
05-24 1738
一、table表格 使用 <table> 标签来定义表格。HTML 中的表格和 Excel 中的表格是类似的，都包括行、列、单元格、表头等元素。 二、表格布局 table 定义一个表格 thead 表格的头部 tbody 表格主体 tr 行 td 列 th 加粗 tfoot 表格的尾部 width、height 表格大小 ...
Tableau基础入门
qq_25041667的博客
09-28 220
Tableau基础入门 超市数据源 添加工作表 工作表连接：内连接、左连接、右连接、全连接 字段拆分 自定义拆分 工作表 添加行、列 类别、子类别 利用颜色展示利润情况 自定义组 别名 智能显示 地图 筛选器 散点图 标记 趋势线（右键-趋势线） P值过大，无意义 排除离群点 查看数据 复制为交叉表 销售额变化 不同年份的每月变化趋势...
个人学习日记
zh_hunan的博客
10-14 205
表格 表格标签 标签名 定义 说明 <table></table> 表格标签 就是一个四方的盒子；最外层包裹表格的大盒子 <tr></tr> 每一行的表格 行标签要再table标签内部才有意义 <td></td> 每一个单元格子 单元格标签是个容器级元素，可以放任何东西 <th><...
五种前端布局之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>
html之表格详解及table表格实现页面布局
weixin_49855251的博客
01-18 1万+
html表格 1、table>标签：声明一个表格，它的常用属性如下： border属性 定义表格的边框，设置值是数值 cellpadding属性 定义单元格内容与边框的距离，设置值是数值 cellspacing属性 定义单元格与单元格之间的距离，设置值是数值 align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right 2、tr>标签：定义表格中的一行 3、和th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们
CSS 之 table 表格布局
最新发布
weixin_45092437的博客
10-09 8514
除了使用HTML的table元素外，我们还可以通过display: table/inline-table;设置元素内部的布局类型为表格布局。并结合table-cell、table-row等相关CSS属性值可以实现HTML中table系列元素的效果，具有表头、表尾、行、单元格等概念，让元素以表格的形式进行布局。
HTML学习之路-03HTML表格、table布局
weixin_63204687的博客
08-20 3390
使用传统布局的案例以及相关知识
table表格布局网页
07-24
博客引用的table布局小例子，没有办法设置为0积分，请见谅
一个table布局的简单网页
10-24
综上所述，一个table布局的简单网页涉及了HTML基础、CSS样式控制、响应式设计原则以及网页优化技巧。虽然现代网页设计更倾向于使用流式布局（如Flexbox或Grid），但了解和掌握table布局仍然是理解网页构建过程中的一...
Android布局基础知识
01-20
Linear Layout（线型布局）、Relative Layout （相对布局）、Frame Layout(帧布局)、Table Layout(表格布局)、Absolute Layout（绝对布局）、Grid Layout(网格布局) 1.线性布局LinearLayout 线性布局在Android开发...
简单网页table布局
03-16
一些初级的javascript css html知识 一些初级的javascript css html知识
table实用的图文表格布局样式
07-24
在网页设计中，表格（Table）是一种常见的布局工具，用于展示结构化数据。随着前端技术的发展，传统的HTML `<table>` 元素已经逐渐被CSS和更现代的布局方法所取代，比如Flexbox（弹性盒模型）。然而，在某些情况下，...
常见的五种前端页面布局（table布局、float布局、absolute布局、flex布局、grid布局）
engineer_z的博客
08-16 2870
前端页面布局
Css之table布局:
SunPeng的博客
11-22 5878
Css之table布局:
table布局
m0_74056313的博客
12-29 514
table布局。。。
第7章页面布局-Table表格布局
亢少军的博客
01-25 540
防采集标记：亢少军老师的课程和资料 import 'package:flutter/material.dart'; void main() { runApp(new MaterialApp( title: 'Table表格布局示例', home: new MyApp(), )); } class MyApp extends StatelessWidget { @...
网页设计——5.table布局
weixin_30410999的博客
11-23 228
今天做一个大的页面，主要是对table布局的理解： 代码： <table cellspacing=0 border=1 style="bordercolor:#C0C0C0;" align="center" width="100%"> 　　<tr align="center" style="background:#628FC3"><td colspan="5" ...
table页面布局
ryan1214的专栏
10-10 739
%@page import="tdh.framework.util.StringUtils"%> %@page import="tdh.frame.web.util.WebUtils"%> String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServe
HTML入门-------table布局
Funny54的博客
05-24 3659
一.table表格 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 表格是以行和列的形势显示信息，常用于显示网格结构的数据。 二.创建表格 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xiaoshengjinbu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值