当前位置:Gxlcms > html代码 > html中的table详解

html中的table详解

时间:2021-07-01 10:21:17 帮助过:96人阅读

本篇文章主要介绍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滚动条的实现

ElTableColumn扩展方法详解

关于SQL ALTER TABLE 语句的相关操作

以上就是html中的table详解的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行