Maison > Article > interface Web > Exemple de configuration de table CSS

Exemple de configuration de table CSS

无忌哥哥original: 2018-06-28 17:24:581736parcourir

<!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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Description du modèle de boîte CSS et exemplesArticle suivant：Description du modèle de boîte CSS et exemples

Articles Liés

Voir plus