HTML 学习笔记(表格)

时间：2022-09-20 18:10:58

HTML 表格

HTML中的表格使用标签<table>来实现，每个表格均有若干行由<tr>标签来定义，每个<tr>表示一行。美航被分为若干个单元格用<td>标签来实现。<td>标签内包含的是单元格的内容。

数据单元格可以包含文本 图片 列表 段落 表单 水平线表格等内容。

HTML表格的边框属性

如果不定义边框属性 表格将不显示边框 有时候这很有用 但是大多数的时候 我们希望显示边框

表格的边框属性 是 border 可以规定边框的宽度 和 颜色。

HTML表格的表头

表格的表头使用标签<th>来定义。

例子

1.没有边框的表格

<body>

        <table>

            <tr>

                <td>100</td>

                <td>200</td>

                <td>300</td>

            </tr>

            <tr>

                <td>400</td>

                <td>500</td>

                <td>600</td>

            </tr>

        </table>

    </body>

2.带有表头的表格

<body>

        <h2>水平的表头</h2>

        <table border="1">

            <tr>

                <th>姓名</th>

                <th>电话</th>

                <th>电话</th>

            </tr>

            <tr>

                <td>田小胖</td>

                <td>5562346</td>

                <td>5562347</td>

            </tr>

            <tr></tr>

        </table>

        <h2>垂直的表头</h2>

        <table border="1px">

            <tr>

                <th>姓名</th>

                <td>田小胖</td>

            </tr>

            <tr>

                <th>电话</th>

                <td>5562346</td>

            </tr>

            <tr>

                <th>电话</th>

                <td>5562347</td>

            </tr>

        </table>

    </body>

带有空数据的单元格

<body>

        <table border="1">

            <tr>

                <td>Some text</td>

                <td>Some text</td>

            </tr>

            <tr>

                <td></td>

                <td>Some text</td>

            </tr>

        </table>

< /body>

单元格边距（cell padding）

<body>

        <table border="1" cellpadding="10">

            <tr>

                <td>Some text</td>

                <td>Some text</td>

            </tr>

            <tr>

                <td></td>

                <td>Some text</td>

            </tr>

        </table>

</body>

单元格间距(cell spacing)

<body>

        <table border="1" cellpadding="10" cellspacing="10">

            <tr>

                <td>Some text</td>

                <td>Some text</td>

            </tr>

            <tr>

                <td></td>

                <td>Some text</td>

            </tr>

        </table>

</body>

总结

<table width="400" border="1" style="border-collapse: collapse;">

 <tr>

  <th align="left">消费项目....</th>

  <th align="right">一月</th>

  <th align="right">二月</th>

 </tr>

 <tr>

  <td align="left">衣服</td>

  <td align="right">$241.10</td>

  <td align="right">$50.20</td>

 </tr>

 <tr>

  <td align="left">化妆品</td>

  <td align="right">$30.00</td>

  <td align="right">$44.45</td>

 </tr>

 <tr>

  <td align="left">食物</td>

  <td align="right">$730.40</td>

  <td align="right">$650.00</td>

 </tr>

 <tr>

  <th align="left">总计</th>

  <th align="right">$1001.50</th>

  <th align="right">$744.65</th>

 </tr>

</table>

还有向表格添加背景图 用属性 background 添加背景颜色 bgColor这些比较简单就不一一举例了。

相关文章