HTML自学之旅(三)表格

涉及的内容有点多哦

<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/p/2839584.html