1、 <!-- table表示表格的整体 -->
<!-- tr表示表格的每一行 --> 2、 cellspacing="0" 表格线宽 宽度变为正常
<!-- td表示表格的单元格 -->
<!-- caption:表格整体的大标题 -->
<!-- th:表头单元格,表格一列的小标题 -->
4、<table border="1" width="300" height="300"> 3、 跨行合并(rowspan)或者跨列合并(colspan
<caption><h3>学生成绩单</h3></caption>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
5、 <!-- thead:表示表格的头部 -->
<!-- tbody:表示表格的主体 -->
<!-- tfoot:表示表格的底部 -->
<table border="1" width="300" height="300"> rowspan 跨行合并
<caption><h3>学生成绩单</h3></caption> colspan 跨列合并
<!-- 表格的头部 -->
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
CSS属性 | 应用的HTML元素 | 描述 | 示例值 |
---|---|---|---|
border | <table> , <th> , <td> | 设置边框的宽度、样式和颜色 | 1px solid black |
border-collapse | <table> | 设置表格边框是否合并为单一边框 | collapse 或 separate |
border-spacing | <table> | 设置表格单元格之间的间距(当border-collapse 为separate 时有效) | 10px |
width | <table> | 设置表格的宽度 | 100% 或 500px |
height | <table> (不常用) | 设置表格的高度(通常不用于表格布局,因为表格高度由内容决定) | 200px (不常用) |
background-color | <table> , <tr> , <th> , <td> | 设置背景颜色 | #f0f0f0 |
color | <table> , <th> , <td> | 设置文本的颜色 | #333333 |
font-size | <table> , <th> , <td> | 设置文本的字体大小 | 16px |
text-align | <th> , <td> | 设置文本的水平对齐方式 | left , center , right |
vertical-align | <tr> , <th> , <td> | 设置文本的垂直对齐方式 | top , middle , bottom |
padding | <th> , <td> | 设置内容与边框之间的内边距 | 10px 或 5px 10px (上下5px,左右10px) |
margin | <table> (不常用) | 设置外边距(通常不用于表格,因为表格是块级元素且自动占据一行) | 20px (不常用) |
border-radius | <table> , <th> , <td> | 设置边框的圆角半径 | 5px 或 10px 10px 0 0 (左上角和右上角10px,右下角和左下角0px) |
box-shadow | <table> | 为表格添加阴影效果 | 2px 2px 5px rgba(0, 0, 0, 0.3) |
caption-side | <table> (不常用) | 设置表格标题的位置(相对于表格),但HTML5中不常用,且可能不被所有浏览器支持 | top 或 bottom |
empty-cells | <table> (不常用) | 设置是否显示空单元格的边框,但HTML5中不常用,且可能不被所有浏览器支持 | show 或 hide |
table-layout | <table> | 设置表格的布局方式 | auto 或 fixed |