专栏首页菜鸟前端工程师html+css学习笔记012-表格

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 条评论
登录 后参与评论

相关文章

  • 2018-09-12vuejs类商城app项目

    Mr. 柳上原
  • react-开发经验分享-自定义封装请求方法(一)

    Mr. 柳上原
  • html+css学习笔记019-H5响应式布局0自适应布局

    Mr. 柳上原
  • Selenium2+python自动化28-table定位

    前言 在web页面中经常会遇到table表格,特别是后台操作页面比较常见。本篇详细讲解table表格如何定位。 一、认识table 1.首先看下...

    上海-悠悠
  • 【原创】bootstrap框架的学习 第七课 -[bootstrap表格]

    <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的表格</title> <link hr...

    用户3055976
  • bootstrap table 表格颜色

    <table class="table table-striped table-bordered table-hover table-responsive"> ...

    用户5760343
  • 千脑中广告位使用方法

    ‘<div><script type=”text/javascript” src=”wz_data/a1.js “></script></div>’

    用户1191760
  • 千脑中广告位使用方法

    用户1272546
  • Bootstrap学习------Tabel

         Bootstrap的表格和Html表格大同小异,只是封装了一些css供我们使用 <table>标签必须引用class="table"基类样式,我们可以...

    用户1055830
  • Java单体应用 - 常用框架 - 01.Bootstrap - 表格

    原文地址:http://www.work100.net/training/monolithic-frameworks-bootstrap-table.html

    光束云

扫码关注云+社区

领取腾讯云代金券