cari

Rumah >hujung hadapan web >tutorial css >CSS表格设置实例

CSS表格设置实例

无忌哥哥
无忌哥哥asal
2018-06-28 17:24:581815semak imbas

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>4.CSS表格设置</title>
    <style>
        /*第一步:给整个表格以及内部的所有单元格加上边框*/
        table,th,td {
            border: 1px solid #333;
        }
        /*第二步:将整个表格以及内部单元格的边框全部折叠,就是线条二合一*/
        table {
            /*折叠表格线*/
            border-collapse: collapse;
            text-align: center;
            width: 60%;
            /*表格居中*/
            margin: 50px auto;
            box-shadow: 3px 3px 3px #888;
            background-image: url(../images/gs/bg.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }
        table caption {
            font-size: 1.6em;
            font-weight: bolder;
            margin-bottom: 30px;
        }
        th,td {
            padding: 10px;
        }
        td img {
            border-radius: 50%;
            box-shadow: 2px 2px 2px #888;
            /*width:80px;*/
        }
        th {
            background-color: rgba(155,155,0,0.3);
            color: brown;
        }
        .green {
            color: darkgreen;
            font-weight: bolder;
            font-size: 1.2em;
        }
    </style>
</head>
<body>
<table>
    <caption>&sect; 当今武林高手排行榜 &sect;</caption>
    <tr>
        <th>名次</th>
        <th>姓名</th>
        <th>江湖绰号</th>
        <th>头像</th>
        <th>独门绝技</th>
        <th>所属门派</th>
        <th>英雄事迹</th>
    </tr>
    <tr>
        <td>1</td>
        <td>王重阳</td>
        <td>童男子</td>
        <td><img src="../images/gs/1.jpg" alt="" width="50"></td>
        <td>一阳指</td>
        <td>全真教</td>
        <td>空手打死过一只狗</td>
    </tr>
    <tr>
        <td>2</td>
        <td>张无忌</td>
        <td>魔教教主</td>
        <td><img src="../images/gs/2.jpg" alt="" width="50"></td>
        <td>九阳神功</td>
        <td>明教</td>
        <td>同时交了5个女朋友</td>
    </tr>
    <tr>
        <td>3</td>
        <td>周伯通</td>
        <td>老顽童</td>
        <td><img src="../images/gs/3.jpg" alt="" width="50"></td>
        <td>全真教</td>
        <td>左右互搏术</td>
        <td>给皇帝戴过绿帽子</td>
    </tr>
    <tr>
        <td>4</td>
        <td>陈近南</td>
        <td>南霸天</td>
        <td><img src="../images/gs/4.jpg" alt="" width="50"></td>
        <td>天地会</td>
        <td>吃西瓜</td>
        <td>吃葡萄从来不吐葡萄皮</td>
    </tr>
</table>
</body>
</html>

Atas ialah kandungan terperinci CSS表格设置实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css盒子模型说明以及实例Artikel seterusnya：CSS控制元素对齐的技巧

Artikel berkaitan

Lihat lagi