构建静态页面之 [ 表格 ]

raoyi 发布于2019-08-02 11:21 / 1682人阅读

摘要：表格描述以网格的形式来呈现数据，并且以二维数据表有行有列来显示数据内容表格元素元素表示定义表格元素表示定义表格中的行元素表示定义表格中的表头元素表示定义表格中的单元格元素表示定义表格中的标题元素表示定义表格的页眉元素表示定义表

表格描述

以网格的形式来呈现数据，并且以二维数据表(有行有列)来显示数据内容

表格元素

元素 - 表示定义表格

元素 - 表示定义表格中的行

元素 - 表示定义表格的页眉

元素 - 表示定义表格的主体

元素 - 表示表格的页脚

表格元素元素属性border属性

表示设置表格的边框

属性值为数字值

会同时设置表格和单元格

rowspan属性

表示设置单元格的跨行

属性值为数字值

colspan属性

表示设置单元格的跨列

属性值为数字值

表格元素整体示例代码

元素 - 表示定义表格中的标题
元素 - 表示定义表格中的表头	元素 - 表示定义表格中的单元格

随身物品
手机	电脑	手表	平板
iphone X	MacBook Pro 15寸	卡西欧	iPad Pro 12寸
iphone SE	MacBook Pro 13寸	尼尚	iPad Pro 10寸
以上二选一

表格样式 caption-side属性

表示设置表格中的标题元素在表格中的显示位置

border属性

表示设置边框

border-width - 表示设置边框的宽度

border-style - 表示设置边框的样式

border-color - 表示设置边框的颜色

border属性也允许简写：顺序是边框的宽度边框的样式边框的颜色

border-collapse属性

表示设置边框是分离还是合并

注意：在设置边框为合并后，border-spacing属性和empty-cells属性会失效

border-spacing属性

表示设置边框之间的距离

empty-cells属性

表示设置空白单元格的显示与隐藏

表格样式示例代码


    
    表格的样式
    



    随身物品
    
        
            手机
            电脑
            手表
            平板
        
    
    
        
            iphone X
            MacBook Pro 15寸
            卡西欧
            iPad Pro 12寸
        
        
            iphone SE
            MacBook Pro 13寸
            尼尚
            iPad Pro 10寸
        
    
    
        
            以上二选一

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

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

构建静态页面之 [ 表格 ]

摘要：表格描述以网格的形式来呈现数据，并且以二维数据表有行有列来显示数据内容表格元素元素表示定义表格元素表示定义表格中的行元素表示定义表格中的表头元素表示定义表格中的单元格元素表示定义表格中的标题元素表示定义表格的页眉元素表示定义表表格描述以网格的形式来呈现数据，并且以二维数据表(有行有列)来显示数据内容表格元素元素 - 表示定义表格元素 - 表示定义表格中的行元素 -...

李昌杰 2019-08-29 16:32 评论0 收藏0
构建静态页面之 [ 布局 ]

摘要：布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中行内块级元素水平居中的第一种方法该方法需作用在父子结构中为父级设置属性为子级设置属性注意的问题属性是设置文本内容对齐方式的布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中 + 行内块级元素（text-a...

andot 2019-08-29 16:31 评论0 收藏0
构建静态页面之 [ 布局 ]

摘要：布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中行内块级元素水平居中的第一种方法该方法需作用在父子结构中为父级设置属性为子级设置属性注意的问题属性是设置文本内容对齐方式的布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中 + 行内块级元素（text-a...

JessYanCoding 2019-08-02 16:31 评论0 收藏0
【静态页面架构】CSS之表格

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

instein 2019-08-29 16:32 评论0 收藏0
支持多框架的组件库KPC 1.0正式发布

摘要：自从年月份对外公布以来，已经经过了个月的迭代，期间发布了几十个正式版本，但一直没有到，因为我们觉得是个里程碑版本，我们必须做的足够完善才敢称之为。自从17年11月份对外公布以来，KPC已经经过了8个月的迭代，期间发布了几十个正式版本，但一直没有到1.0，因为我们觉得1.0是个里程碑版本，我们必须做的足够完善才敢称之为1.0。而如今我们有信心对外宣布：KPC 1.0终于来了！其实距离...

刘厚水 2019-08-26 10:10 评论0 收藏0