HTML自学之旅（三）--表格

表格样式与布局详解

最新推荐文章于 2025-07-22 15:24:43 发布

转载最新推荐文章于 2025-07-22 15:24:43 发布 · 70 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lx09110718/archive/2012/12/30/2839584.html

本文详细介绍了HTML表格的样式设置，包括边框、边距、间距、背景颜色、背景图像、单元格对齐方式以及使用colgroup标签进行列组合。同时展示了如何在表格中插入不同类型的元素，如段落、列表和嵌套表格，并通过frame属性实现框架布局。

涉及的内容有点多哦

<html>
<body>
<p>
每个表格由table标签开始，行由tr开始，数据有td标签开始。
</p>
<h4>一列：</h4>
<table border="1">
<tr>
<td>100</td>
<tr>
</table>

<h4>一行三列：</h4>
<table border="2">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>

<h4>两行三列：</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>

<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

<hr />
<h4>带有普通边框：</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>

<h4>带有粗的边框：</h4>
<table border="8">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>

<h4>带有很粗的边框：</h4>
<table border="15">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>

<h4>表格的表头（实际相当于我们做表的时候的列名）</h4>
<table border="1">
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<tr>
<td>100</td>
<td>200</td>
<td>200</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>200</td>
</tr>
</table>

<hr />
<h4>表格中的空单元格：</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td></td>
</tr>
<tr>
<td>400</td>
<td></td>
<td>200</td>
</tr>
</table>
<h4>注意：虽然上一个表中空单元格也显示了边框，但有的浏览器可能就会不显示，为了保险，加入空格占位符</h4>

<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>400</td>
<td>&nbsp;</td>
<td>200</td>
</tr>
</table>

<hr />
<h4>带有标题的表格：</h4>
<table border="6">
<caption>我的标题</caption>
<tr>
<td>100</td>
<td>200</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>400</td>
<td>&nbsp;</td>
<td>200</td>
</tr>
</table>

<h4>横跨两列的单元格：</h4>
<table border="6">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>lixiang</td>
<td>111133445</td>
<td>432545</td>
</tr>
</table>

<h4>横跨两行的单元格：</h4>
<table border="6">
<tr>
<th>姓名</th>
<td>lixiang</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>111133445</td>
</tr>
<tr>
<td>432545</td>
</tr>
</table>

<hr />
<h4>表格中的内容可以是不同种类哦：</h4>
<table border="2">
<tr>
    <td>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    </td>

    <td>这个单元格包含一个表格:
        <table border="2">
            <tr>
                <td>hello</td>
                <td>happy</td>
                <td>AB</td>
                <td>CD</td>
                    
            </tr>
            
        </table>
    </td>
</tr>
<tr>
    <td>这个单元包含一个列表：
        <ul>
            <li>苹果</li>
            <li>香蕉</li>
            <li>西瓜</li>
        
        </ul>
    </td>

    <td>Hello OK</td>
</tr>

</table>

<hr />
<h4>单元格边距：</h4>
<table border="2"> 
<caption>不带边距的：</caption>
<tr>
    <td>first</td>
    <td>row</td>
</tr>
<tr>
    <td>second</td>
    <td>row</td>
</tr>
</table>
<p>再看带有边距的</p>
<table border="2" cellpadding="10"> 
<caption>带边距的：</caption>
<tr>
    <td>first</td>
    <td>row</td>
</tr>
<tr>
    <td>second</td>
    <td>row</td>
</tr>
</table>

<hr />
<h4>单元格间距：</h4>
<table border="2"> 
<caption>不带间距的：</caption>
<tr>
    <td>first</td>
    <td>row</td>
</tr>
<tr>
    <td>second</td>
    <td>row</td>
</tr>
</table>
<p>再看带有间距的</p>
<table border="2" cellspacing="10"> 
<caption>带间距的：</caption>
<tr>
    <td>first</td>
    <td>row</td>
</tr>
<tr>
    <td>second</td>
    <td>row</td>
</tr>
</table>

<hr />
<h4>表格中添加背景颜色或背景图像：</h4>
<table border="2" bgcolor="yellow"> 
<tr>
    <td>first</td>
    <td>row</td>
</tr>
<tr>
    <td>second</td>
    <td>row</td>
</tr>
</table>
<p>背景图像：</p>
<table border="2" background="C:\Users\Ideal\Desktop\^_^\webweb\img\table background.png"> 
<tr>
    <td>first</td>
    <td>row</td>
</tr>
<tr>
    <td>second</td>
    <td>row</td>
</tr>
</table>

<hr />
<h4>单元格中添加背景颜色或背景图像：</h4>
<table border="2"> 
<tr>
    <td bgcolor="red">first</td>
    <td>row</td>
</tr>
<tr>
    <td background="C:\Users\Ideal\Desktop\^_^\webweb\img\table background.png">second</td>
    <td>row</td>
</tr>
</table>

<hr />
<h4>在表格中有居左居右等排列形式</h4>
<table border="2" cellpadding="10" width="400"> 
<tr>
    <th align="left">消费项目</th>
    <th align="left">一月</th>
    <th align="left">二月</th>
</tr>
<tr>
    <td align="left">衣服</td>
    <td align="right">200</td>
    <td align="right">100</td>
</tr>
<tr>
    <td align="left">化妆品</td>
    <td align="middle">200</td>
    <td align="middle">100</td>
</tr>
<tr>
    <td align="left">食品</td>
    <td align="right">200</td>
    <td align="right">100</td>
</tr>
</table>
<p>垂直方向对其方式（看不出效果的）：</p>
<table border="2" cellpadding="10" width="400" valign="bottom"> 
<tr>
    <th align="left">消费项目</th>
    <th align="left">一月</th>
    <th align="left">二月</th>
</tr>
<tr>
    <td align="left">衣服</td>
    <td align="right">200</td>
    <td align="right">100</td>
</tr>
<tr>
    <td align="left">化妆品</td>
    <td align="middle">200</td>
    <td align="middle">100</td>
</tr>
</table>

<hr />
<h4>frame框架</h4>
<p>Frame box:frame 也可以在 Internet Explorer 中正确地显示。</p>
<table frame="box"> 
<tr>
    <td>first</td>
    <td>row</td>
</tr>
<tr>
    <td>second</td>
    <td>row</td>
</tr>
</table>
<p>Frame above:</p>
<table frame="above"> 
<tr>
    <td>first</td>
    <td>row</td>
</tr>
<tr>
    <td>second</td>
    <td>row</td>
</tr>
</table>

<p>Frame below:</p>
<table frame="below"> 
<tr>
    <td>first</td>
    <td>row</td>
</tr>
<tr>
    <td>second</td>
    <td>row</td>
</tr>
</table>

<hr />
<h4>colgroup标签</h4>
<p>colgroup 标签用于对表格中的列进行组合，以便对其进行格式化。
如需对全部列应用样式，colgroup 标签很有用，这样就不需要对各个单元和各行重复应用样式了。
colgroup 标签只能在 table 元素中使用。</p>
<p>下面这个例子，两个 colgroup 元素为表格中的三列规定了不同的对齐方式和样式（注意第一个 colgroup 元素横跨两列）：</p>
<table border="6" width="200">
    <colgroup span="2" align="left"></colgroup>
    <colgroup align="right" style="color:color:#0000FF"></colgroup>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>200</td>
</tr>
</table>

</body>
</html>

转载于:https://www.cnblogs.com/lx09110718/archive/2012/12/30/2839584.html