下面是关于“HTML5制作表格样式”的完整攻略。
HTML5制作表格样式攻略
步骤一:HTML表格结构
HTML表格结构由<table>
、<tr>
和<td>
元素构成。<table>
元素用于定义表格,<tr>
元素定义行,<td>
元素定义每行中的单元格。
示例代码:
<table>
<tr>
<td>表格第一行第一列</td>
<td>表格第一行第二列</td>
<td>表格第一行第三列</td>
</tr>
<tr>
<td>表格第二行第一列</td>
<td>表格第二行第二列</td>
<td>表格第二行第三列</td>
</tr>
</table>
步骤二:CSS样式
CSS样式用于定义表格的颜色、边框、间距等样式。可以使用<table>
元素的style
属性或在CSS文件中定义样式。
定义表格样式
示例代码:
table {
border-collapse: collapse; /* 合并边框 */
border-spacing: 0; /* 设置单元格间距为0 */
width: 100%; /* 设置表格宽度为100% */
background-color: #fff; /* 设置表格背景颜色 */
}
定义表格边框样式
示例代码:
table {
border-collapse: collapse; /* 合并边框 */
border-spacing: 0; /* 设置单元格间距为0 */
width: 100%; /* 设置表格宽度为100% */
}
td, th {
border: 1px solid #ccc; /* 设置单元格边框为1像素实线 */
}
定义表格单元格样式
示例代码:
table {
border-collapse: collapse; /* 合并边框 */
border-spacing: 0; /* 设置单元格间距为0 */
width: 100%; /* 设置表格宽度为100% */
}
td {
padding: 10px; /* 设置单元格内边距为10像素 */
}
th {
padding: 10px; /* 设置表头单元格内边距为10像素 */
text-align: left; /* 设置表头单元格文本左对齐 */
background-color: #eee; /* 设置表头单元格背景颜色 */
}
示例一:简单表格
示例代码:
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>女</td>
</tr>
</table>
效果如下:
姓名 | 年龄 | 性别 |
---|---|---|
张三 | 20 | 男 |
李四 | 25 | 女 |
示例二:带斑马线表格
示例代码:
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
td {
padding: 10px;
border-bottom: 1px solid #ccc;
}
tr:nth-child(odd) {
background-color: #f2f2f2;
}
th {
padding: 10px;
text-align: left;
background-color: #eee;
}
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>女</td>
</tr>
<tr>
<td>王五</td>
<td>30</td>
<td>男</td>
</tr>
<tr>
<td>赵六</td>
<td>35</td>
<td>女</td>
</tr>
</table>
效果如下:
姓名 | 年龄 | 性别 |
---|---|---|
张三 | 20 | 男 |
李四 | 25 | 女 |
王五 | 30 | 男 |
赵六 | 35 | 女 |
希望我的回答能够帮到你。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:HTML5制作表格样式 - Python技术站