htmltable样式_CSS表格样式
表格的样式⼀般可以在HTML中直接定义，但是结构和样式需要分开声明，这可以⽅便后期的维护和修改。CSS中的表格样式有caption-side(表格标题位置)、border-collapse(表格边框合并)、border-spacing(表格边框间距)。
caption-side
caption-side属性取值只有2个，如下表
属性值说明
top标题在顶部(默认)
bottom标题在底部
举⼀个标题在底部的⽰例
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>表格标题位置title>
<style type="text/css">
table{
caption-side: bottom;
}
table,td{
border: 1px solid silver;
}
style>
head>
<body>
<table>
<caption>四⼤天王caption>
<tr>
<td>刘德华td>
<td>60岁td>
tr>
<tr>
<td>张学友td>
<td>60岁td>
tr>
<tr>
<td>郭富城td>
<td>56岁td>
tr>
<tr>
<td>黎明td>
<td>55岁td>
tr>
table>
body>
html>
border-collapse
在表格加⼊边框后单元格之间有⼀定的空隙 ，为了美观，我们可以把单元格之间的空隙去除。    border-collapse属性取值有2个，如下表
属性值说明
separate边框分开，有空隙
collapse边框合并，⽆空隙
⽰例：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>表格边框合并title>
<style type="text/css">
table{
border-collapse: collapse;            }
table,td{
border: 1px solid silver;            }
style>
head>
<body>
<table>
<caption>四⼤天王caption>            <tr>
<td>刘德华td>
<td>60岁td>
tr>
<tr>
<td>张学友td>
<td>60岁td>
tr>
<tr>
<td>郭富城td>
<td>56岁td>
tr>
html网页设计 table <tr>
<td>黎明td>
<td>55岁td>
tr>
table>
body>
html>
border-spacing
表格边框的间距，直接⽤像素值。 DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>表格边框间距title>
<style type="text/css">
table{
border-spacing: 5px;
}
table,td{
border: 1px solid silver;            }
style>
head>
<body>
<table>
<caption>四⼤天王caption>            <tr>
<td>刘德华td>
<td>60岁td>
tr>
<tr>
<td>张学友td>
<td>60岁td>
tr>
<tr>
<td>郭富城td>
<td>56岁td>
tr>
<tr>
<td>黎明td>
<td>55岁td>
tr>
table>
body>
html>
本节主要学习了表格样式，最后对其总结。
表格标题位置：caption-side
表格边框合并：border-collapse
表格边框间距：border-spacing

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。