文章目录
CSS表格0. 表格的HTML1. 表格的边框2. 表格内
CSS表格
这学期要学jsp (什么时候还学jsp)无奈从HTML开始学习，发现html内置的表格不够美观（太难看了）
0. 表格的HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center
</title>
<style>
.center {
margin: auto;
width: 60%;
background-image: url(wallhaven-4dyeeo_1920x1080.png);
background-position: center;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
text-align: center;
height: 50px;
vertical-align: bottom;
width: 33%;
}
td {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="center">
<table>
<tr>
<td>Company
</td>
<td>Contact
</td>
<td>Country
</td>
</tr>
<tr>
<td>Alfreds Futterkiste
</td>
<td>Maria Anders
</td>
<td>Germany
</td>
</tr>
<tr>
<td>Berglunds snabbköp
</td>
<td>Christina Berglund
</td>
<td>Sweden
</td>
</tr>
<tr>
<td>Centro comercial Moctezuma
</td>
<td>Francisco Chang
</td>
<td>Mexico
</td>
</tr>
<tr>
<td>Ernst Handel
</td>
<td>Roland Mendel
</td>
<td>Austria
</td>
</tr>
<tr>
<td>Island Trading
</td>
<td>Helen Bennett
</td>
<td>UK
</td>
</tr>
<tr>
<td>Königlich Essen
</td>
<td>Philip Cramer
</td>
<td>Germany
</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars
</td>
<td>Yoshi Tannamuri
</td>
<td>Canada
</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti
</td>
<td>Giovanni Rovelli
</td>
<td>Italy
</td>
</tr>
<tr>
<td>North/South
</td>
<td>Simon Crowther
</td>
<td>UK
</td>
</tr>
<tr>
<td>Paris spécialités
</td>
<td>Marie Bertrand
</td>
<td>France
</td>
</tr>
<tr>
<td>The Big Cheese
</td>
<td>Liz Nixon
</td>
<td>USA
</td>
</tr>
<tr>
<td>Vaffeljernet
</td>
<td>Palle Ibsen
</td>
<td>Denmark
</td>
</tr>
</table>
</div>
</body>
</html>
1. 表格的边框
td, th{
border: 1px, solid,black
;
}
效果 将边框折叠
table
{
border-collapse:collapse
;
}
th, td
{
border: 1px solid black
;
}
效果图
2. 表格内
调整每个格子的宽高
table{
width: 100%
;
}
td, th{
height: 50px
;
width: 33%
;
}
文字对齐
td, th{
text-align: right
;
height: 50px
;
vertical-align: middle
;
}
表格填充和颜色
td{
padding:15px
;
}
table, td, th
{
border:1px solid green
;
}
th
{
background-color:green
;
color:white
;
}
