html中使用table的示例分析

小编给大家分享一下html中使用table的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

1. 普通表格，简单的HTML表格由table元素以及tr、td和th元素组成，其中tr是指表格行，td是指单元格，th定义表头。空单元格就直接不填即可，或者用 。

<table> <tr> <th>表头</th> <th>表头</th> <th>表头</th> </tr> <tr> <td>单元格1 </td> <td></td> <td>单元格3</td> </tr> </table>

2.带有边框的表格。border元素表示表格的边框,默认单位是px，cellspcing表示表格与表格之间的间距，cellpadding表示内边距/内填充的距离。

<table border="1" cellspacing="10" cellpadding="30">	<tr>	<th>表头</th>	<th>表头</th>	<th>表头</th>	</tr>	<tr>	<td>单元格1</td>	<td>单元格2</td>	<td>单元格3</td>	</tr>	</table>

3.带有背景图片或颜色的表格，注意：bgcolor表示颜色，而background不能直接在html里面添加颜色(这句话说错了，是使用的方式错误，直接使用内联样式书写的格式是style="background:red"或者是style="background-color:red")，在table中添加就是对整个表格设置，如果在单独的tr或者td中设置就是对单独的行或者单元格来进行设置。

<table border="1">	<tr>	<th>表头</th>	<th>表头</th>	<th>表头</th>	</tr>	<tr>	<td>单元格1</td>	<td>单元格2</td>	<td>单元格3</td>	</tr>	</table>

4、跨行和跨列的表格，rowspan表示跨行，colspan表示跨列，跨列的话就在当前表格行内删除，跨行的话就在下方的表格行内删除。

<table border="1">	<caption>跨行</caption>	<tr>	  <th>姓名</th>	  <td>Bill Gates</td>	</tr>	<tr>	  <th rowspan="2">电话</th>	  <td>555 77 854</td>	</tr>	<tr>	  <td>555 77 855</td>	</tr>	</table>

<table border="1">	<caption>跨列</caption>	<tr>	  <th>姓名</th>	  <th colspan="2">电话</th>	</tr>	<tr>	  <td>Bill Gates</td>	  <td>555 77 854</td>	  <td>555 77 855</td>	</tr> </table>

5.带有标题的表格，caption表示表格的标题，也可以用其他标签比如p标签来定位表格标题，但使用caption的好处是他会跟着表格一起走，默认是在和表格居中对齐。

6.在表格单元中排列内容，比如在单元格中添加段落，列表等。

<table border="1">	<tr>	<td>	<p>这是一个段落，hello World！</p>	</td>	<td>	<ul>	<li>这是一个列表	<ul>	<li>html</li>	<li>css</li>	<li>javascript</li>	</ul>	</li>	</ul>	</td>	</tr> </table>

7.frame框架属性，规定外侧边框的哪个部分是可见的。//暂时不会使用。

以上是“html中使用table的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！