2

table跟excel一样的细线 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table</title>
</head>

<body>
    <table width="500px" height="300px" align="center" cellpadding="0" cellspacing="1" bgcolor="Grey">
        <tr align="right" bgcolor="white">
            <td align="center">会议标题</td>
            <td align="center">日程标题</td>
        </tr>
        <tr align="right" bgcolor="white">
            <td align="center">会议组织人</td>
            <td align="center">日程创建人</td>
        </tr>
        <tr align="right" bgcolor="white">
            <td align="center">会议时间</td>
            <td align="center">开始时间~结束时间</td>
        </tr>
        <tr align="right" bgcolor="white">
            <td align="center">会议地点</td>
            <td align="center">会议室或地点</td>
        </tr>
        <tr align="right" bgcolor="white">
            <td align="center">描述</td>
            <td align="center">日程描述</td>
        </tr>
    </table>
</body>

</html>

 方法2：利用border-collape:collapse属性将叠加的边框合并

html文件
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table</title>
    <link rel="stylesheet" href="./table2.css">
</head>

<body>
    <table align="center" width=500 height=300>
        <tr>
            <td>会议标题</td>
            <td>日程标题</td>
        </tr>
        <tr>
            <td>会议组织人</td>
            <td>日程创建人</td>
        </tr>
        <tr>
            <td>会议时间</td>
            <td>开始时间~结束时间</td>
        </tr>
        <tr>
            <td>会议地点</td>
            <td>会议室或地点</td>
        </tr>
        <tr>
            <td>描述</td>
            <td>日程描述</td>
        </tr>
    </table>
</body>

</html>
css文件
table,td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
 

方法三3：有些情况下不能用单独的css文件，可以利用标签的sytle属性，把相应的全局属性添加给table

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table</title>
    <link rel="stylesheet" href="./table2.css">
</head>

<body>
    <table align="center" width=500 height=300 border="1" style="border-collapse: collapse;text-align:center;color:red">
        <tr>
            <td>会议标题</td>
            <td>日程标题</td>
        </tr>
        <tr>
            <td>会议组织人</td>
            <td>日程创建人</td>
        </tr>
        <tr>
            <td>会议时间</td>
            <td>开始时间~结束时间</td>
        </tr>
        <tr>
            <td>会议地点</td>
            <td>会议室或地点</td>
        </tr>
        <tr>
            <td>描述</td>
            <td>日程描述</td>
        </tr>
    </table>
</body>

</html>

 

posted @ 2021-08-17 16:46  LY21  阅读(62)  评论(0)    收藏  举报