CSS表格设计

文章目录

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;
}