基础案例一： 

table{
    border:1px solid black;
}
效果：（整个表格画出一个边框）

基础案例二： 

td{
    border:1px solid black;
}

效果：（所有的数据单元格均画出一个边框）

基础案例三： 

th{
    border:1px solid black;
}

效果：（所有的表头单元格均画出一个边框）

基础案例四： 

table,th,td{
    border:1px solid black;
}

效果：（表格整体双边框呈现，类似于“border-collapse:separate;”的效果）


😄总结：border样式会给指定对象添加一个外框。在表格中，只要对th/td/table标签添加border样式，那么拥有th/td/table标签的对象便会画出一个边框。问题：表格整体呈现双边框效果。

基础案例五： 


table,th,td {
    border:1px solid black;
}
/*注意：“border-collapse:collapse；”，对于table有效，而th或td则无效。*/
table{
       border-collapse:collapse;
}
效果：表格整体双边框合并，以单边框的方式呈现。


基础案例六：

一般，只设定表格的宽度，表格的高度可以由 每个单元格的高度 决定。 
table,th,td {
    border:1px solid black;
}
table {
    border-collapse:collapse;
    width:100%;
}
th {
    height:50px;
}

基础案例七： 

table,th,td {
    border:1px solid black;
}
table {
    border-collapse:collapse;
    width:100%;
}
th {
    height:50px;
}
td {
    text-align:center;
}

效果：

总结：表格中文字的水平对齐方式：th（表头）默认是居中对齐，td（数据）默认是左对齐。可使用text-align文字的水平对齐属性对表格内的文字进行左对齐、居中对齐、右对齐的设定。问题：如何垂直对齐呢？

基础案例八： 

table,th,td {
    border:1px solid black;
}
table{
    border-collapse:collapse;
    width:100%;
}
th{
    height:50px;
    vertical-align:top;
}
td{
    text-align:center;
    height:30px;
    vertical-align:bottom;
}
效果：

表格文字的垂直对齐属性vertical-align，需要和每个单元格自身的height属性相结合。注意：

①单元格的高度默认和文字高度一致，此时垂直对齐属性vertical-align效果不明显。

②增大每个单元格的高度：

（法一）直接设定height的大小。height的值越大，单元格高度越高;

（法二）指定padding的大小。padding的值越大，单元格高度越高。

③表格标题caption位置的设定方式：caption-side:bottom/top/inherit;

基础案例九： 

table,th,td{
    border:1px solid black;
}
table{
    border-collapse:collapse;
    width:100%;
}
th{
    height:50px;
    background-color:gray;
    color:white;
}
td{
    text-align:center;
    vertical-align:center;
  background-color:yellow;
}
效果：表格颜色分单元格背景***ackground-color）和数据本身的颜色（color）。

基础案例十：固定表头或第一列

（1）单独固定表头

css样式： 
div {
    border:1px solid black;
    widows: 400px;
    height:290px;
    overflow:auto;
    border-right:0;
}
table {
    border-collapse: collapse;
}
td,th {
    border-right:1px solid gray;
    border-bottom:1px solid gray;
/*保证6个单元格的宽度>网页的宽度1280px */
    width:330px;
    height:20px;
    box-sizing: border-box;
}
th{
    /* 用来遮住上滑动时显示出来的数据 */
    background-color: lightblue;
    position:sticky;
    top: 0;
}


html脚本结构：①表头内容一般放在标签<thead></thead>中，数据内容一般放在<tbody></tbody>标签内。②整个表格则会放在一个div中。

效果：

（2） 单独固定第一列 

div{
    border:1px solid black;
    widows: 400px;
    height:290px;
    overflow:auto;
    border-right:0;
}
table{
    border-collapse: collapse;
    /* 出现横向滑动条 */
    table-layout:fixed;
    width:100%;
}

td,th{
    border-right:1px solid gray;
    border-bottom:1px solid gray;
   /*保证6个单元格的宽度>网页的宽度1280px */
    width:330px;
    height:20px;
    box-sizing: border-box;
}
th:first-child,td:first-child{
    /* 用来遮挡从左往右滑时,漏出来的文字 */
    background-color:white;
    position:sticky;
    left: 0;
}

（3）同时固定第一行与第一列 

div{
    border:1px solid black;
    widows: 400px;
    height:290px;
    overflow:auto;
    border-right:0;
}
table{
    border-collapse: collapse;
    table-layout:fixed;
    width:100%;
}
td,th{
    border-right:1px solid gray;
    border-bottom:1px solid gray;
/*保证6个单元格的宽度>网页的宽度1280px */
    width:330px;
    height:20px;
    box-sizing: border-box;
}
/* 固定表头 */
th{
    background-color: lightblue;
    position:sticky;
    top: 0;
    /* 为了保证颜色显示出来，应放置在下层 */
    z-index:1;
}
/* 固定第一列 */
th:first-child,td:first-child{
    background-color:white;
    position:sticky;
    left: 0;
}
/* 将第1行第1列单元格的背景颜色更改与其他表头颜色一致 */
th:first-child{
   /* 为了保证颜色显示出来，应放置在上层 */
    z-index:2;
    background-color: lightblue;
}
效果：