美文网首页
认识html————细线表格

认识html————细线表格

作者: 周行知 | 来源:发表于2019-04-19 18:08 被阅读0次

    细格表格的定义

    先观察一个示例:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>细线表格</title>

    </head>

    <body>

    <table border="1">

    <tr>

    <td>姓名</td>

    <td>年龄</td>

    </tr>

    <tr>

    <td>周行知</td>

    <td>29</td>

    </tr>

    </table>

    </body>

    </html>

    运行结果·如图所示:

    现在我们再来看以下代码(注:在表格中不能通过外边距为0来实现细线表格是不靠谱的,因为它是将2条线合并为一条线,所以看上去很不舒服。),代码如下:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>细线表格</title>

    </head>

    <body>

    <table bgcolor="black" cellspacing="1px">

    <tr bgcolor="white">

    <td>姓名</td>

    <td>年龄</td>

    </tr>

    <tr bgcolor="white">

    <td>周行知</td>

    <td>29</td>

    </tr>

    </table>

    </body>

    </html>

    注:bgcolor是背景颜色,人们常说背景墙,其实就是指的背景墙要刷什么颜色油漆做背景。

    运行结果如下:

    发散练习:大家可以尝试一下,通过border="1"的方式来实现(在表格中不能通过外边距为0来实现细线表格)看看效果能不能达到

    总结细线表格制作方式

    1.给table标签设置bgcolor.

    2.给tr标签设置bgcolor.

    3.给table标签设置cellspacing="1px"

    相关文章

      网友评论

          本文标题:认识html————细线表格

          本文链接:https://www.haomeiwen.com/subject/qzpcgqtx.html