首页 > 代码库 > HTML 学习笔记(表格)

HTML 学习笔记(表格)

2024-08-26 23:58:10   221人阅读

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这些比较简单就不一一举例了。

 

HTML 学习笔记(表格)


联系
我们