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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.05.29 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读