html+css学习笔记012-表格

Author:Mr.柳上原

  • 付出不亚于任何的努力
  • 愿我们所有的努力,都不会被生活辜负
  • 不忘初心,方得始终

能者多劳

有时候很不赞同这句话

没转行之前

干着设计、文案、策划、售后、人事、行政......

老板说:他们都没什么经验,做不出来的你就做出来给他们看看,让他们知道你的能力有多强大,他们就服你了

于是,我一人包揽了公司大半部分的工作

或许这就是创业型公司的悲哀吧

然后

得到的结局是

所谓 ‘ 没有经验的人 ’ 从早玩到晚

遇到事情

‘ 没事,x经理会帮我解决,随便做下就行了 ’

我觉得

能者多劳后面还应该加上一句

能力决定生活质量 态度决定人生命运

<!DOCTYPE html> <!-- 文档类型:标准html文档 -->

<html lang='en'> <!-- html根标签 翻译文字:英文 -->

<head> <!-- 网页头部 -->

<meat charset='UTF-8'/> <!-- 网页字符编码 -->

<meat name='Keywords' content='关键词1,关键词2'/>

<meat name='Description' content='网站说明'/>

<meat name='Author' content='作者'/>

<title>前端59期学员作业</title> <!-- 网页标题 -->

<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->

<style type='text/css'> /*内部样式表*/

/* 表格样式初始化 */
th,td{
    padding:0;
}
table{
    border-collapse:collapse;
}

table{
text-align:center; 文字在单元格内居中
border:1px solid red; 表格边框颜色,优先级小于th,td
border-spacing:10px 10px; 边框线与边框线之间的距离
border-collapse:; 边框折叠:
separate默认:分离
collapse折叠  上面的border-spacing会失效
}
th,td{
border:1px solid #ff9999; 表格边框颜色
}

table一般特性:
    th 内容上下左右居中,并且加粗
    td 内容 上下居中 左对齐
    单元格默认平分table的宽度
   tbody会平分高度 
   thead 和tfoot里面的th td 内容撑开
    table固定宽度时,td 不固定宽度时,按照内容百分比平分宽度
    table固定宽度时,td 固定宽度时,完全平分宽度
    table固定宽高时,宽度不能被撑大,高度能撑大
    单元行和列的最大宽度和高度取决于最高和最宽的单元格
    table不给宽高时由内容撑开

table特性:
    默认占据一行
    支持margin 和margin auto
   th,td: 不支持margin,支持padding
   table组标签里面不要放除了表格标签外的其他标签元素
   td里面可以随便放任意元素

table特性2:
display:table; 会换行
display:table-row; 把标签变为表格的tr单元行属性
display:table-cell; 把标签变为表格的td单元格属性

</style>

</head>

<body> <!-- 网页主干:可视化区域 -->

<div id='wrap' class='wrap'>
<table> <!-- 表格标签 -->
<caption> </caption> <!-- 给整个表格设置标题 -->
<thead> <!-- 表格头 -->
<tr> <!-- 表格行 -->
<th> </th> <!-- 表格标题 -->
</tr>
</thead>
<tbody> <!-- 表主干 -->
<tr>
<td> </td> <!-- 单元格 -->
</tr>
</tbody>
<tfoot> <!-- 表格尾 -->
<tr>
<td> </td>
</tr>
</tfoot>
colspan 跨越表格列(数上自己)
rowspan 跨约表格行(数上自己)

</table>
</div>

</body>

</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯NEXT学位

你的网站可以一键变色吗?

459110
来自专栏数据小魔方

论一个图表的自我修养

昨天给大家讲解了商务图表制作中的黄金原则——最大化数据墨水比。 今天继续给大家解构图表的元素布局! 商务图表作为表达业务数据的重要方式,需要遵循基本的元素布局...

363110
来自专栏大数据钻研

前端面试经典问题:CSS中居中的几种方式

作为面试常客,学会这些,面试多点把握,同学间逼格升高 周五,老大说他面试了一个问题,是css居中的问题,然后我们在这边就讨论了一番,周末嗨玩,尾巴上想起这件事,...

50960
来自专栏河湾欢儿的专栏

响应式布局流式布局

响应式布局:根据不同的尺寸适配 viewport width=device-width 设置视口的宽度等于设备的宽度,如果不设置的话,默认视口的宽度是980...

12220
来自专栏姬小光

像素眼是怎样炼成的

传说的像素眼,也就是可以快速分辨出 1px 以上差异的双眼,往往由资深设计师所 get√,小鸡君本人是个苦逼程序员,但小鸡君的像素眼也不比任何一个设计师差。

11440
来自专栏十月梦想

HTML5音频audio和视频video用法解析

    html5新增加了2个媒体标签音频(audio)和视频(video),这样就更便于我们进行媒体化元素的内容开发网页!!!

50320
来自专栏wblearn

纯CSS3绘制的逼真,呆萌,超酷的CSS3动画纯CSS3人物行走动画 逼真炫酷CSS3动画纯CSS3绘制的小猫笑脸动画 超呆萌纯CSS3绘制可爱小男孩动画 超酷面部表情

40810
来自专栏用户2442861的专栏

CSS中height:100%和height:inherit的异同

2. 大多数情况作用是一样的 除去兼容性,大多数情况下,两者作用是一样的,甚至都很难想出不一样的理由。

10010
来自专栏十月梦想

移动端适配之比例缩放适配

前面一篇简单介绍了适配的方案(百分比适配),对于百分比的适配也是挺多问题,这次介绍一下viewport适配方案!

20830
来自专栏技术专栏

微信小程序- 移动设备的分辨率与rpx

27710

扫码关注云+社区

领取腾讯云代金券