HTML表格与列表样式实践-优快云博客

本文链接：https://blog.youkuaiyun.com/zjsfdx/article/details/79334081

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
    table{
        border:solid 3px #0af;
    }
    td{
        border:solid 1px #f0f;
    }
</style>
</head>

<body>

    你好shang
    <table>
        <tr><td>A</td><td>A</td><td>A</td><td>A</td></tr>
        <tr><td>A</td><td>A</td><td>A</td><td>A</td></tr>
        <tr><td>A</td><td>A</td><td>A</td><td>A</td></tr>
        <tr><td>A</td><td>A</td><td>A</td><td>A</td></tr>
    </table>
    你好xia

</body>
</html>

这里写图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
    table{
        display:inline-table;
        border:solid 3px #0af;
    }
    td{
        border:solid 1px #f0f;
    }
</style>
</head>

<body>

    你好shang
    <table>
        <tr><td>A</td><td>A</td><td>A</td><td>A</td></tr>
        <tr><td>A</td><td>A</td><td>A</td><td>A</td></tr>
        <tr><td>A</td><td>A</td><td>A</td><td>A</td></tr>
        <tr><td>A</td><td>A</td><td>A</td><td>A</td></tr>
    </table>
    你好xia

</body>
</html>

这里写图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
    div{
        display:list-item;
        list-style-type:georgian;
        margin-left:30px;
    }
</style>
</head>

<body>

    <div>实例1</div>  
    <div>实例2</div>
    <div>实例3</div>
    <div>实例4</div>

</body>
</html>