涉及的内容有点多哦
<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> </td> </tr> <tr> <td>400</td> <td> </td> <td>200</td> </tr> </table> <hr /> <h4>带有标题的表格:</h4> <table border="6"> <caption>我的标题</caption> <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="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>