html table tb左对齐,标签之美五——网页表格的设计

2023-10-27

标签之美——网页表格的使用

通过表格,可以使网页排版更加清晰,形式更加简洁漂亮。

一、表格布局中三个重要的标签

1、

:表格的开始和结束标签,行列的布局都在

2、

行标签的开始和结束

3、列标签的开始和结束

行标签在列标签的外层,不能单独使用,其中必须至少有一列。示例如下:

表格的内容

效果如下:

4ad5d25b539bf3622f799fdfeed59702.png

二、单元格设置的相关标签

1、单元格表头

这个标签用来设置表格的表头,作用和列标签相似,只是字体是加黑的。

1 2

c6488785b142a92111af2873dd8c7148.png

2、表格宽度属性和高度属性width,height

这两个属性可以设置在

1 2

5d3b7459d43654e398f984971ff49155.png

3、设置表格背景图片background

这个属性和尺寸属性用法一样,写在相应的标签里,就是相应的背景图案,设置的是图片的路径。

4、设置表格行列间距cellspacing

1 2

3695088ab3ee0bcf5ed8d7f95b5bb702.png

5、设置单元格内容偏移量 cellpadding

第一列 第二列

34c0a9c231172b2633f4f848422e75a1.png

三、表格的边框属性和对齐模式

灵活的应用边框,可以使表格看起来更加整洁有序。

1、边框宽度属性border

2、边框的颜色属性bordercolor

3、不显示外边框frame="void"

第一列 第二列

c26f4714274dece8bf1dd667fecf4929.png

4、设置frame="hsides"则只显示上下外边框

第一列 第二列

46bf5ebd2cd1e80474538e888a84b7f2.png

5、设置frame="vsides"则只显示左右外边框

6、单独显示边框的frame值分别为:

上:above

下:below

左:lhs

右:rhs

7、设置表格对齐模式:

水平对齐模式:align

表格的align属性可以设置对齐模式,center,left,right分别对应居中,左对齐,右对齐。

垂直对齐模式:valign

和水平对齐模式相似,这个属性的值为:middle,top,bottom对应了中间对齐,上对齐和下对齐。

四、表格行和列的操作

1、行的合并:rowspan

第一行 第一行
第二行

aa30c398c65a1c52f0584fe6b767748f.png

2、列的合并colspan

第一列
第一列 第二列

c4c5732f19df4d1027ad5dcecf3ce6fa.png

3、表格的标题标签

标题
第一列
第一列 第二列

8296dae233a5573938724640dc31f1ca.png

专注技术,热爱生活,交流技术,也做朋友。

——珲少 QQ群:203317592

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

html table tb左对齐,标签之美五——网页表格的设计 的相关文章

  • 突破Windows的防御:mLNK Builder

    来自Check Point Research 通过将有效载荷转换为 LNK 快捷方式 使有效载荷可以绕过安全解决方案 如Windows Defender Windows 10 Smart Screen和UAC LNK 或 LiNK 文件是
  • DDPG强化学习pytorch代码

    DDPG强化学习pytorch代码 参照莫烦大神的强化学习教程tensorflow代码改写成了pytorch代码 具体代码如下 也可以去我的GitHub上下载 torch 0 41 import torch import torch nn
  • outlook显示服务器返回错误,为什么我用outlook收发126.com的邮件服务器总是返回密码错误????...

    为什么我用outlook收发126 com的邮件服务器总是返回密码错误 來源 互聯網 2010 03 10 22 51 56 評論 分類 電腦 網絡 gt gt 互聯網 問題描述 为什么我用outlook收发126 com的邮件服务器总是返
  • 在Linux下编译VLC-Qt

    在Linux下编译VLC Qt 一 源码准备 1 下载VLC源码 2 下载VLC Qt源码 二 编译VLC源码 1 解压VLC压缩包 2 安装VLC依赖的库 3 配置VLC 4 编译与安装 三 编译VLC Qt源码 1 安装cmake 2
  • 【服务器学习之 Docker 容器技术学习笔记】

    Docker 文章目录 Docker 什么是Docker 为什么要使用Docker Docker与虚拟机的区别 Docker安装 下载wget工具 备份centos的yum仓库源 下载阿里云仓库源 更新本地软件列表和缓存 下载docker
  • 图像处理之纹理特征提取

    旋转不变性 图像旋转时 所选特征不随图像的旋转而发生变化 LBP参考 LBP纹理特征提取 灰度不变性 旋转不变性 import numpy as np from PIL import Image import math def LBP sr
  • chatgpt赋能python:PythonTCP断开连接原因和解决方案

    Python TCP 断开连接原因和解决方案 Python 是一种广泛使用的编程语言 它支持网络编程 数据处理 人工智能 机器学习等诸多领域 在网络编程中 Python 通常使用 TCP 连接传输数据 然而 在使用 TCP 连接传输数据的过
  • eclipse新建项目有红叉,项目可以正常启动。解决办法。

    eclipse里遇到红叉或者报错 首先应该在Window gt Show View gt Problems下查看错误信息 一般可以知道报错原因 报错有很多原因 以下是我自己遇到的 1 Project configuration is not
  • unity中fixedUpdate和Update的区别

    下面这段代码演示游戏暂停 using UnityEngine using System Collections public class GamePauseTest MonoBehaviour public float moveSpeed
  • 【框架篇】Gin框架源码解读【更新中】

    1 中间件 中间件的实现 依照设计模式中责任链模式 依次调用当前路由 注册的中间件 gin go HandlerFunc defines the handler used by gin middleware as return value
  • Perl 批量添加Copyright版权信息

    对所有输入文件 如果没有版权信息则加上版权信息 否则什么都不做 并对原文件以 bak结尾备份 开始我使用如下程序 尝试前千万先备份输入的文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 2
  • 财报解读:创维集团2022年业绩表现凸显韧性,新能源业务将大有作为

    2023年3月23日 创维集团披露了2022年财报 总营收534 91亿元 同比增长5 03 归属母公司净利润8 27亿元 同比下降49 39 在电视行业正处于阵痛期的情况下 这份业绩展现了公司的发展韧性 而从财报也可以看出 创维感受到了电
  • 录音如何转文字?这几款音频转文字工具可以给到你帮助

    记录文本速度总是赶不上倾听语音速度 咋整 别急 这有一招献给你 我们可以借助音频转文字工具 快速将语音信息转写 轻松解放双手 音频转文字工具不仅转写语音的速度快 而且转写效果杠杠的 值得一试哦 话不多说 音频转文字免费教程双手奉上 有需要的
  • DS18B20温度传感器使用介绍

    DS18B20温度传感器简介 DS18B20是一种数字温度传感器 应用非常广泛 它输出的是数字信号 同时具有体积小 硬件资源耗费少 抗干扰能力强 精度高等特点 DS18B20温度传感器特点 1 采用单线接口方式 DS18B20温度传感器仅需
  • 实现按钮悬停动画

    知识点与技巧 伪元素 使用伪元素来作为按钮悬停效果动画展示的元素 z index 的使用技巧 使用z index属性来控制按钮和伪元素的层次关系 transform transition 复习 使用transform transition两
  • 舵机的使用方法和一些注意事项

    舵机是我们经常使用的一个工具 它可以说是直流电机的进化版本 只需要一根信号线就能方便的控制舵机旋转固定的角度 下面我们就来看一看舵机的使用方法和一些使用过程中的注意事项 一般的舵机总共有三条线 电源线 供电线 和信号线 其中红色的是电源正极
  • 在idea隐藏掉不想要看到的文件(设置隐藏文件)

    一 为什么隐藏 因为想 通常 我们会在项目中 看到很多不常用或者根本不操作的文件 那么 我们就会选择 隐藏 掉 注 但是需要心中有数 有些文件隐藏后 可能会影响开发 谨慎 二 如何设置 1 找到File gt Setting gt File
  • vite和esbuild/roolup的优缺点

    esbuild 优点 基于go语言 go是纯机器码 不使用 AST 优化了构建流程 多线程并行 缺点 esbuild 没有提供 AST 的操作能力 所以一些通过 AST 处理代码的 babel plugin 没有很好的方法过渡到 esbui
  • 第十天Python之面向对象(OOP)基本概念

    面向对象编程 Object Oriented Programming 简写 OOP 目标 了解 面向对象基本概念 一 面向对象基本概念 我们之前学习的编程方式就是 面向过程 的 面向过程 和 面向对象 是两种不同的 编程方式 对比 面向过程

随机推荐

  • Linux学习笔记--rm命令(删除文件或目录)

    rm 英文名remove 删除的意思 1 命令格式 rm 选项 文件或目录 2 常用选项 rm f 强行删除 忽略不存在的文件 不提示确认 f为force的意思 rm i 进行交互式删除 即删除时会提示确认 i为interactive的意思
  • CentOS7.x系统中使用Docker时,在存储方面需要注意的问题

    简述 1 Docker 1 12 6 v17 03文档中CentOS7系统下安装时 明确说明 用于生产时 必须使用devicemapper驱动的direct lvm模式 需要我们提前准备好块设备 以提供更好的稳定性和性能 默认使用devic
  • Java阿里云短信发送工具类

    短信服务API介绍 阿里云短信发送 调用SendSms发送短信 短信服务 阿里云帮助中心
  • 基于Hutools图片上传下载

    1 pom依赖
  • Python视觉处理(二)线检测

    python线检测使用的时cv HoughLinesP 函数 它有两个参数 minLineLength 线的最短长度 比这个线短的都会被忽略 MaxLineGap 两条线之间的最大间隔 如果小于此值 这两条线就会被看成一条线 这个函数的返回
  • 物理层(1.物理层基本概念&2.数据通信基础知识)

    物理层的作用就是在连接计算机的传输介质上传输数据比特流 并且尽可能屏蔽掉传输媒体和通信手段的差异 一 物理层的基本概念 1 机械特性 指明接口所用接线器的形状和尺寸 引线数目和排列 固定和锁定装置等 2 电气特性 指明在接口电缆的各条线上出
  • 五大常用算法之三:动态规划

    动态规划 动态规划 Dynamic Programming 简称DP 需要分解出问题的子结构以及通过子结构重新构造最优解 动态规划不像回溯法 有套路可以套用 动态规划需要大量练习 才能掌握规律 一般思路 1 判断问题的子结构 有最优子结构时
  • vit网络模型简介

    目录 一 前言 1 1 Transformer在视觉领域上使用的难点 1 2 输入序列长度的改进 1 3 VIT对输入的改进 二 Vision Transformer模型 2 1 Embedding层 2 2 Transformer Enc
  • Java 8 – 从一个 Stream中过滤null值

    复习一个Stream 包含 null 数据的例子 Java8Examples java package com mkyong java8 import java util List import java util stream Colle
  • 人工智能涉及算法

    最近需要提交高级人工网络的课程论文 故查找一下资料 做如下记录 后期会继续补充部分算法的的详细内容 自己的理解和代码实现部分 人工智能的三大基石 算法 数据和计算能力 就算法来看 涉及如下几种 一 按照模型训练方式不同分类 可以分为监督学习
  • shell编程实现:依次提示用户输入3个整数,脚本根据数字大小依次排序输出3个数字。

    关于这个题目 有如下代码 bin bash read p 请输入一个整数 num1 read p 请输入一个整数 num2 read p 请输入一个整数 num3 tmp 0 if num1 gt num2 then tmp num1 nu
  • WXSS:微信小程序版CSS

    完整微信小程序 Java后端 技术贴目录清单页面 必看 WXSS WeiXin Style Sheets 是一套样式语言 用于描述 WXML 的组件样式 WXSS 用来决定 WXML 的组件应该怎么显示 为了适应广大的前端开发者 WXSS
  • MySQL 输入任何语句都提示You must reset your password using ALTER USER 解决方法

    安装并配置完成MySQL 5 7 21 修改第一次密码并登陆后 出现提示 You must reset your password using ALTER USER 的提示错误语句 解决办法如下 SET PASSWORD PASSWORD
  • 18-数据结构-查找-B树和B+树

    简介 B树和B 树 都是当存储数据较大时 从硬盘读取数据的优化 emm 我这么说有点迷糊 还是从应试考试的角度解释吧 B树和B 树 都是在二叉排序树的基础上 优化的 跟二叉排序树很像 但B树它由于相比于二叉排序树 降低了树高 即一个结点内可
  • ubuntu下安装和配置Qt5.12.8

    1 下载qt opensource linux x64 5 12 8 run 2 sudo qt opensource linux x64 5 12 8 run 这样会安装到 opt目录下 3 安装过程中 要先拔掉网线 再装 一路默认 到选
  • 动态路由协议EIGRP配置实战

    一 路由协议概述 1 路由协议简介 对于路由器而言 要找出最优的数据传输路径是一件比较有意义却很复杂的工作 最优路径有可能会有赖于节点间的转发次数 当前的网络运行状态 不可用的连接 数据传输速率和拓扑结构 为了找出最优路径 各个路由器间要通
  • Java:如何正确使用Timer【java定时器的使用(Timer) 】

    在需要按时间计划执行简单任务的情况下 Timer是最常被使用到的工具类 使用Timer来调度TimerTask的实现者来执行任务 有两种方式 一种是使任务在指定时间被执行一次 另一种是从某一指定时间开始周期性地执行任务 下面是一个简单的Ti
  • dataframe 转 字典

    背景 将商品id以及商品类别作为字典的键值映射 生成字典 原为DataFrame 创建一个DataFrame 列值类型均为int型 import pandas as pd item pd DataFrame item id 100120 1
  • IDEA插件Apifox,一键自动生成接口文档!

    一 Apifox插件的优势 作为一名后端开发在项目开发过程中 肯定需要提供接口文档 一般我们有两种方案 项目结合Swagger 自动生成接口文档 手动将接口复制到其它接口文档 比如postman Apifox 第一种方案缺陷在于 为了生成完
  • html table tb左对齐,标签之美五——网页表格的设计

    标签之美 网页表格的使用 通过表格 可以使网页排版更加清晰 形式更加简洁漂亮 一 表格布局中三个重要的标签 1 表格的开始和结束标签 行列的布局都在 2 行标签的开始和结束 3 列标签的开始和结束 行标签在列标签的外层 不能单独使用 其中必