【静态页面架构】CSS之表格

instein 发布于2019-08-29 16:32 / 3327人阅读

摘要：架构表格元素表格的基本结构以元素建立表格元素是表格行，元素是表示表格单元格表格以行和列表示容器元素属性默认的表格和单元格都有边框表格默认是有宽度的单元格之和决定元素表示表格中的单元格单元格默认宽度由内容决定姓名年龄职业桐人

CSS架构 表格: 1.元素:

表格的基本结构；
以table元素建立表格
tr元素是表格行，td元素是表示表格单元格

表格的表头单元格；

th元素来定义表格行或列表头单元格
th元素中使用scope属性设置单元格的行和列表头



    
    姓名
    年龄
    职业


    桐人
    17
    剑士


    亚丝娜
    16
    补师

表格的标题；

caption元素定义表格的标题
caption元素被定义在table元素中顶部

登录人员表
姓名	年龄	职业
桐人	17	剑士
亚丝娜	16	补师

跨行与跨列；

colspan属性是设置单元格横跨的列数
rowspan属性是设置单元格横跨的行数

长表格；

thead元素；设置表格的页眉内容
tbody元素；设置表格的主题内容
tfoot元素；设置表格的页脚内容

登录人员表
姓名	年龄	职业
桐人	16	剑士
亚丝娜	17	补师

2.样式: 表格布局；

以table-layout属性定义布局表格单元格
fixed值；

表格标题；

以caption-side属性来是caption元素显示表格位置
有2个值表示；top表示表格的顶部，bottom表示表格的底部

登录人员表
姓名	年龄	职业
桐人	17	剑士
亚丝娜	16	补师

表格边框；

border-collapse属性来表示决定边框是分开还是合并
border-spacing属性设置相邻单元格边框之间距离

云服务器 GPU云服务器架构之坑系列 jsp 设置页面之企业it架构转型之道 css表格样式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113808.html

【静态页面架构】HTML之布局

摘要：一布局水平居中第一种居中方式以属性设置父级元素和设置行内块级元素将属性设置父级元素设置文本内容水平方向居中设置行内块级元素爱新觉罗呼延觉罗第二种居中方式以设置块级元素和外边距特性来设置外边距实现水一.布局； 1.水平居中第一种居中方式；以text-align属性设置父级元素和设置行内块级元素 body{ text-align: cente...

imtianx 2019-08-02 11:21 评论0 收藏0
HTML

摘要：目前，中关村黑马程序员训练营已成长为行业学员质量好课程内容深企业满意的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。黑马程序员的学员筛选制度，远比现在以上的企业招聘流程更为严格。系统的学习可以参考w3c的教程 web概念概述 * JavaWeb： * 使用Java语言开发基于互联网的项目 * 软件架构： 1. C/S: Client/Server 客户端/服务...

Snailclimb 2019-04-23 13:29 评论0 收藏0
设计架构

摘要：先来看一张系统前后端架构模型图。一种接口的约定本文用于定义一种统一的接口设计方案，希望具有参考价值。，和都是常见的软件架构设计模式，它通过分离关注点来改进代码的组织方式。如何无痛降低 if else 面条代码复杂度相信不少同学在维护老项目时，都遇到过在深深的 if else 之间纠缠的业务逻辑。面对这样的一团乱麻，简单粗暴地继续增量修改常常只会让复杂度越来越高，可读性越来越差，有没...

graf 2019-06-24 17:56 评论0 收藏0
【静态页面架构】CSS之链接和图像

CSS架构一。链接: 链接元素:通过使用a元素的href属性设置跳转到指定页面地址 a{ color: blue; text-decoration: none; } a:hover{ cursor:default; text-decoration:...

jlanglang 2019-08-29 16:32 评论0 收藏0
【静态页面架构】CSS之显示与溢出

摘要：架构显示与溢出显示属性以设置隐藏效果和元素类型设置当前元素为隐藏效果这种方式将元素设置为隐藏后，该元素不会再占有页面空间通过属性将元素显示将元素设置为块级元素将元素设置为内联元素将元素设置为行内元素属性以设置，元素显示或隐藏 CSS架构显示与溢出； 1.显示； display属性；以display设置隐藏效果和元素类型 div { widt...

tolerious 2019-08-29 16:34 评论0 收藏0