表格的标签组成
HTML中的表格是由<table>为主体标签，浏览器会将该标签解释为一个表格。表格中的行使用<tr>标签进行定义。<tr>标签为<table>标签的子类，设置若干个<tr>标签可以将表格分割为若干个行。<td>标签用于定义表格的列，<td>标签为又是<tr>标签的子类，因此每个行都需要设置相应数量的<td>标签来分割列，形成一个完整的表格。
- 表格中可以插入文本、图片、列表、段落、表单、水平线等任何html标签，甚至可以用来做页面布局。
- 但是table布局存在代码冗余过长、不符合HTML规范、搜索引擎不友好等问题。
因此建议大家尽量不要使用table进行页面布局，除非页面中确实需要一张表格。
剩下的<th>、<thead>、<tbody> 和 <tfoot>很少被用到，这是由于浏览器对它们的支持不太好。
表格的边框属性
表格自身可以定义border属性来决定表格边框的宽度，该属性的值默认是以数字单位进行显示，例如border=”1″该值的单位为px。注意，不要在border的数值后面加上任何单位，否该值无法正确识别。
border-collapse : collapse; 表示表格的两边框合并为一条。
collapse
英 [kəˈlaps]美 [kəˈlæps]
v.
倒塌;塌陷;昏倒;突然失败;崩溃;倒闭;折叠;使倒塌;使塌陷;萎陷
n.
倒塌;塌陷;崩溃;瓦解;垮掉;突然倒闭
[例句]
Tabulation programs can be used to collapse this list in various ways.
制表程序可用于以各种方式套缩这份列表。
[变形]
过去分词：collapsed现在分词：collapsing过去式：collapsed
第三人称单数：collapses
表格的表头
在<table>中可以通过<th>标签设置表头，表头的<th>标签与<tr>标签属于平级，并且表头一般出现在<tr>标签的前面。对于一个表格来说，表头并不是必须的，可以根据需要插入表头。<th>标签内的文字会被自动加粗。
单元格的合并
单元格的合并分为垂直合并与水平合并，在合并时需要确定其他行与列中是否有对应数量的单元格。
水平合并单元格使用colspan属性，其值是用数字的形式确定需要合并的单元格数量，例如colspan=”2″即代表向右合并两个单元格。
垂直合并单元格使用rowspan属性，与水平合并的属性相同，同样也是以数字形式确定需要合并的单元格数量，例如rowspan=”2″代表向下合并两个单元格。
单元格边距
表格具有与padding样式类似的内边距功能。通过在<table>标签内定义cellpadding属性，来为其标签下的所有<td>元素设置内边距。cellpadding属性的参数是值是以数字的形式来确定边距的大小，例如cellpadding=”10″ 则表示 table中的所有<tr>标签内边距为10px
单元格间距
单元格的间距是设置<tr>标签的外边距，这个也与css样式中的margin类似，通过在<table>标签内定义cellspacing属性，来为其标签下的所有td元素设置外边距。该属性也是以数字的形式来确定外边距的大小，例如cellspacing=”10″ 则表示这个table中的所有<tr>标签的外边距为10px
为表格设置背景
表格可以通过background属性为表格或单元格设置任意图片作为背景，其使用方法非常像css中的background。为background设置对应的图片路径，即可使单元格显示相应的图片。例如background=”table_bg.gif”
表格内容的对齐排列
表格的对齐分为水平对齐和垂直对齐。它们分别是align属性与valign属性，将这两个属性插入到对应的标签中即可完成单元格内文本或图像的对齐。
水平对齐align分别有三个值：left左对齐、center水平居中、right右对齐
垂直对齐valing也有三个值：top顶端对齐、middle垂直居中、bottom底部对齐、baseline为基线对齐。
其中基线对齐可能无法从字面上理解，其实基线对齐也就是文本出现在表格的中上部而不是正中央。如果文字不大的话，效果和middle差不多，比middle稍微靠上一点。
CSS中的table-layout语句
这个语句可以用来指定表格显示的样式，比如
table { table-layout: fixed }
它可以取三个值：
- auto（缺省）
- fixed
- inherit
auto表示单元格的大小由内容决定。fixed表示单元格的大小是固定的，由第一个指定大小的单元格决定；如果所有单元格都没有指定大小，则由第一个单元格的默认大小决定；如果单元格中的内容超出单元格的大小，则用CSS中的overflow命令控制。微软公司声称使用这个命令，表格的显示速度可以加快100倍。
为了加快表格显示，最好事先就在CSS（或者table标签的width和height属性）中指定表格的宽度和高度。
实操案例：
<style>
.mainTable {
border-color: #D6D6D6;
font-size: 12px;
color: #666;
margin: 20px;
}
caption {
margin-bottom: 10px;
}
h1 {
font-size: 15px;
color: #373737;
text-align: center;
}
p {
margin: 0;
padding: 0;
text-indent: 2em;
}
a {
margin: 10px;
color: #53a4fe;
text-decoration: none;
padding-bottom: 2px;
border-bottom: #D0E4FF 2px solid;
}
.titleBc {
background-color: #F7F9FD;
color: #434343;
text-align: center;
font-weight: bold;
}
td {
padding: 10px 20px;
}
.table2 td {
padding: 1px 70px 1px 6px;
}
.table3 td {
padding: 0 2px 1px 6px;
}
.liucheng {
padding: 4px 8px;
border: 1px solid #53a4fe;
color: #53a4fe;
border-radius: 4px;
}
.borderBottom td {
border-bottom: 2px solid #53a4fe;
}
.dot {
position: relative;
border-right: 1px solid #53a4fe;
}
.dot::after {
display: block;
color: #53a4fe;
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #53a4fe;
position: absolute;
bottom: -3px;
right: -3px;
}
</style>
<table cellspacing=0 border=1 class="mainTable">
<caption>
<h1>中国民航信息集团有限公司-财务部关于增设境外公司监管组的请示</h1>
</caption>
<tr>
<td width="10%" class="titleBc">会议名称</td>
<td>2018年 第22期总经理办公会</td>
<td class="titleBc">会议时间</td>
<td>2018年6月19日</td>
</tr>
<tr>
<td class="titleBc">事项名称</td>
<td colspan="3">
重大决策事项/企业运营管理/机构调整</td>
</tr>
<tr>
<td class="titleBc">参会人</td>
<td colspan="3"> 崔志雄 (董事长) 、肖殷洪 (总经理)、刘建平 (副总经理)、荣刚 (副总经理)、王玮 (副总经理)、李劲松 (总法律顾问) 、陈汉清(纪委书记) 、朱晓星 (副总经理) 、黄源昌 (副总经理)
</td>
</tr>
<tr>
<td class="titleBc">列席人</td>
<td colspan="3">
无</td>
</tr>
<tr>
<td class="titleBc">决策流程</td>
<td colspan="3">
<table cellspacing=0>
<tr>
<td></td>
<td class="liucheng" colspan="2">2018年第20次党委会</td>
<td></td>
<td class="liucheng" colspan="2">2018年第22期总经理办公会</td>
<td></td>
</tr>
<tr class="borderBottom">
<td></td>
<td class="dot"></td>
<td></td>
<td></td>
<td class="dot"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td align="center" colspan="2">2018年5月2日</td>
<td></td>
<td align="center" colspan="2"> 2018年6月19日</td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="titleBc">是否通过</td>
<td colspan="3">是</td>
</tr>
<tr>
<td class="titleBc">审议结果</td>
<td colspan="3">
<table cellspacing=4 class="table2">
<tr>
<td>崔志雄 (董事长) : 同意</td>
<td>荣刚 (副总经理) : 同意</td>
<td>陈汉清 (纪委书记) : 同意</td>
</tr>
<tr>
<td>肖殷洪 (总经理) : 同意</td>
<td>王玮 (副总经理) : 同意</td>
<td> 朱晓星 (副总经理) : 同意</td>
</tr>
<tr>
<td>刘建平 (副总经理) : 同意</td>
<td>李劲松 (总法律顾问) : 同意</td>
<td>黄源昌 (副总经理) : 同意</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="titleBc">议题决议</td>
<td colspan="3">
<p> 经2018年6月19日第22期公司总经理办公会据财务部汇报，目前公司有9家境外子公司共计13户企业(Openjaw公司下设3户子公司)，除Openjaw公司外均未派驻财务负责人，总部及时准确掌握各家境外公司财务相关资料和信息难度较大，对集团实施集中财务管控防范财务风险带来较大挑战。
</p>
<p>2018年5月2日公司党委常委会讨论了关于财务部增设境外公司监组事宜，会议决定:“为坚决落实国务院国资委关于海外资产监管要求、审计整改要求和海外 公司财务管理要求，统-财务部设立境外公司监管组，负责境外公司财务监工作，下-步要研究建立健全管理机制,解决管得住,管得好的问题。具体编制请总 办会研究决定。”根据公司党委常委会决议，为加强对境外公司的财务管控和集中管理，建议公司在财务部增设境外公司監组,主要职责是对境外公司资金、预 算、核算，财务报告外派财务负责人等事项进行监管和联络，组内拟设境外公司监管组组长岗(1I人)
、分支机构事务岗(1人) 、监管联络岗(1人，供需新增 编制3人。
</p>
<table class="table3">
<tr>
<td> 会议讨论决定:</td>
<td>（一） 坚决执行公司党委常委会决议。</td>
</tr>
<tr>
<td></td>
<td>（二）同意在财务部增设境外财务监管组，主要职责是对境外公司资金、预算、核算、财务报告、外派财务负责人等事项进行监管和联络。</td>
</tr>
<tr>
<td></td>
<td>（三）由规划发展部负责做好境外财务监组后续设立相关工作，并研究拟定境外财务监管组名称。</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="titleBc">听取意见</td>
<td colspan="3"><a href="">财务部关于增设境外公司监管组的请示的征求意见反馈
</a><a href=""> 法律意见书</a> </td>
</tr>
<tr>
<td class="titleBc">是否采纳</td>
<td colspan="3">是</td>
</tr>
<tr>
<td class="titleBc">议题材料</td>
<td colspan="3"><a href="">财务部关于增设境外公司监管组的请示</a></td>
</tr>
</table>
扫一扫
1858
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
