表格边框
CSS 中设置表格边框，请使用 border 属性:
<style type="text/css"> table{ border:1px solid red; } th,td{ border:1px solid red; } </style> </head> <body> <table> <tr> <th>姓名</th> <th>描述</th> </tr> <tr> <td>小白</td> <td>小白是个猥琐但不下流的人</td> </tr> <tr> <td>小黑</td> <td>小白是个下流但不猥琐的人</td> </tr> <tr> <td>小红</td> <td>小白是个好学但不下流的人</td> </tr> </table> </body>
上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。如果需要把表格显示为单线条边框，请使用 border-collapse 属性。(细线表格)
<style type="text/css"> table{ border:1px solid red; border-collapse:collapse;/*该属性加在table中*/ } th,td{ border:1px solid red; } </style> </head> <body> <table> <tr> <th>姓名</th> <th>描述</th> </tr> <tr> <td>小白</td> <td>小白是个猥琐但不下流的人</td> </tr> <tr> <td>小黑</td> <td>小白是个下流但不猥琐的人</td> </tr> <tr> <td>小红</td> <td>小白是个好学但不下流的人</td> </tr> </table> </body>
表格宽度和高度
通过 width 和 height 属性定义表格的宽度和高度。
<style type="text/css"> table{ border:1px solid red; border-collapse:collapse;/*该属性加在table中*/ width:100%; } th,td{ border:1px solid red; height:50px; } </style> </head> <body> <table> <tr> <th>姓名</th> <th>描述</th><!--th中的文字在表格中会默认水平和垂直都居中--> </tr> <tr> <td>小白</td> <td>小白是个猥琐但不下流的人</td><!--td中的文字在表格中会默认垂直居中 水平不会默认居中--> </tr> <tr> <td>小黑</td> <td>小白是个下流但不猥琐的人</td> </tr> <tr> <td>小红</td> <td>小白是个好学但不下流的人</td> </tr> </table> </body>
表格文本对齐
text-align 和 vertical-align 属性设置表格中文本的对齐方式。
text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中：
vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐：
<style type="text/css"> table{ border:1px solid red; border-collapse:collapse;/*该属性加在table中*/ width:100%; text-align:center; } th,td{ border:1px solid red; height:50px; vertical-align:bottom;/*设置在table中这个属性无效*/ } </style> </head> <body> <table> <tr> <th>姓名</th> <th>描述</th><!--th中的文字在表格中会默认水平和垂直都居中--> </tr> <tr> <td>小白</td> <td>小白是个猥琐但不下流的人</td><!--td中的文字在表格中会默认垂直居中 水平不会默认居中--> </tr> <tr> <td>小黑</td> <td>小白是个下流但不猥琐的人</td> </tr> <tr> <td>小红</td> <td>小白是个好学但不下流的人</td> </tr> </table> </body>
表格颜色
<style type="text/css"> table{ border:1px solid red; border-collapse:collapse;/*该属性加在table中*/ width:100%; text-align:center; } th,td{ border:1px solid red; vertical-align:bottom;/*设置在table中这个属性无效*/ background-color:#3F0; color:#000; } </style> </head> <body> <table> <tr> <th>姓名</th> <th>描述</th><!--th中的文字在表格中会默认水平和垂直都居中--> </tr> <tr> <td>小白</td> <td>小白是个猥琐但不下流的人</td><!--td中的文字在表格中会默认垂直居中 水平不会默认居中--> </tr> <tr> <td>小黑</td> <td>小白是个下流但不猥琐的人</td> </tr> <tr> <td>小红</td> <td>小白是个好学但不下流的人</td> </tr> </table> </body>
表格内边距
控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性：
<style type="text/css"> table{ border:1px solid red; border-collapse:collapse;/*该属性加在table中*/ width:100%; text-align:center; } th,td{ border:1px solid red; vertical-align:bottom;/*设置在table中这个属性无效*/ padding:20px; } </style> </head> <body> <table> <tr> <th>姓名</th> <th>描述</th><!--th中的文字在表格中会默认水平和垂直都居中--> </tr> <tr> <td>小白</td> <td>小白是个猥琐但不下流的人</td><!--td中的文字在表格中会默认垂直居中 水平不会默认居中--> </tr> <tr> <td>小黑</td> <td>小白是个下流但不猥琐的人</td> </tr> <tr> <td>小红</td> <td>小白是个好学但不下流的人</td> </tr> </table> </body>
CSS 控制Table的其他属性
border-spacing设置分隔单元格边框的距离。（如果使用border-collapse将边框合并了的话，该属性无效）
<style type="text/css"> table{ border:1px solid red; border-collapse:collapse;/*该属性加在table中*/ width:100%; text-align:center; border-spacing:20px;/*如果将上面border-collapse才有效*/ } th,td{ border:1px solid red; vertical-align:bottom;/*设置在table中这个属性无效*/ padding:20px; } </style> </head> <body> <table> <tr> <th>姓名</th> <th>描述</th><!--th中的文字在表格中会默认水平和垂直都居中--> </tr> <tr> <td>小白</td> <td>小白是个猥琐但不下流的人</td><!--td中的文字在表格中会默认垂直居中 水平不会默认居中--> </tr> <tr> <td>小黑</td> <td>小白是个下流但不猥琐的人</td> </tr> <tr> <td>小红</td> <td>小白是个好学但不下流的人</td> </tr> </table> </body>
caption-side设置表格标题的位置。
| top | 默认值。把表格标题定位在表格之上。 |
| bottom | 把表格标题定位在表格之下。 |
| inherit | 规定应该从父元素继承 caption-side 属性的值。 |
<style type="text/css"> table{ border:1px solid red; border-collapse:collapse;/*该属性加在table中*/ caption-side:bottom;/*将标题设置在表格的最下面*/ } th,td{ border:1px solid red; vertical-align:bottom;/*设置在table中这个属性无效*/ } </style> </head> <body> <table> <caption>学生信息表</caption> <tr> <th>姓名</th> <th>描述</th><!--th中的文字在表格中会默认水平和垂直都居中--> </tr> <tr> <td>小白</td> <td>小白是个猥琐但不下流的人</td><!--td中的文字在表格中会默认垂直居中 水平不会默认居中--> </tr> <tr> <td>小黑</td> <td>小白是个下流但不猥琐的人</td> </tr> <tr> <td>小红</td> <td>小白是个好学但不下流的人</td> </tr> </table> </body>
empty-cells设置是否显示表格中的空单元格。
| hide | 不在空单元格周围绘制边框。 |
| show | 在空单元格周围绘制边框。默认。 |
| inherit | 规定应该从父元素继承 empty-cells 属性的值。 |
<style type="text/css"> table{ border:1px solid red; border-collapse:collapse;/*该属性加在table中*/ empty-cells: hide;/*使用了该属性，在没有内容的单元格将不会显示，如果使用border-collapse合并了单元格，那么看起来这个单元格还是存在的，但实际单元格是不存在了*/ } th,td{ border:1px solid red; vertical-align:bottom;/*设置在table中这个属性无效*/ } </style> </head> <body> <table> <tr> <th>姓名</th> <th>描述</th><!--th中的文字在表格中会默认水平和垂直都居中--> </tr> <tr> <td>小白</td> <td>小白是个猥琐但不下流的人</td><!--td中的文字在表格中会默认垂直居中 水平不会默认居中--> </tr> <tr> <td>小黑</td> <td>小白是个下流但不猥琐的人</td> </tr> <tr> <td>小红</td> <td><!--这里是空的单元格，没有内容--></td> </tr> </table> </body>
table-layout设置显示单元、行和列的算法。
| automatic | 默认。列宽度由单元格内容设定。 |
| fixed | 列宽由表格宽度和列宽度设定。 |
| inherit | 规定应该从父元素继承 table-layout 属性的值。 |
<style type="text/css"> table{ border:1px solid red; border-collapse:collapse;/*该属性加在table中*/ width:200px; table-layout:auto; } th,td{ border:1px solid red; vertical-align:bottom;/*设置在table中这个属性无效*/ } </style> </head> <body> <table> <tr> <th>姓名</th> <th>描述</th><!--th中的文字在表格中会默认水平和垂直都居中--> </tr> <tr> <td>小白</td> <td>小白是个猥琐但不下流的人</td><!--td中的文字在表格中会默认垂直居中 水平不会默认居中--> </tr> <tr> <td>小黑</td> <td>小白是个下流但不猥琐的人</td> </tr> <tr> <td>小红</td> <td><!--这里是空的单元格，没有内容--></td> </tr> </table> </body>
案例：