欢迎来到我的博客小站。  交流请加我微信好友: studyjava。  也欢迎关注同名公众号:Java学习之道

HTML5表格常用的一些属性

  |   0 评论   |   0 浏览

我们经常会用HTML5来创建表格,所以我大致总结了一下HTML5中表格的一些常用的属性,表格一般写在body标签中,用table标签包裹,tr标签表示行,td标签标识列,属性写在你要标识的标签之中.

1.一个没有边框的表格--基本的无边框无修饰的表格

<table>
	<tr>
		<td>表格1</td>
		<td>表格2</td>
		<td>表格3</td>
	</tr>
	<tr>
		<td>表格4</td>
		<td>表格5</td>
		<td>表格6</td>
	</tr>
</table>

2.有边框的表格--table标签加上border属性,可以使表格带边框,属性值 表示边框的宽度

<table border ="1"> 
	<tr>
		<td>表格</td>
		<td>表格</td>
		<td>表格</td>
	</tr>
</table>

3.表格中的表头--在整体表格的外面加上一个p标签来表示表头

<p>这里可以写表头</p>
<table>
	<tr>
		<td>表格</td>
		<td>表格</td>
		<td>表格</td>
    </tr>
</table>

4.怎么使表格中有空的单元格--一个无内容的td标签

<table>
	<tr>
		<td>表格</td>
		<td></td>
		<td>表格</td>
	</tr>
</table>

5.带有标题的表格--caption标签内写表格的标题

<table>
	<caption>这里是标题</caption>
	<tr>
		<td>表格</td>
		<td>表格</td>
		<td>表格</td>
	</tr>
</table>

6.表格内的标签--ul标签为列表标签

<table>
	<tr>
		<td>表格</td>
		<td>
			<ul>
				<li>表格内标签1</li>
				<li>表格内标签2</li>
				<li>表格内标签3</li>
			</ul>
		</td>
		<td>表格</td>
	</tr>
</table>

7.表格单元格边距--cellpadding属性表示单元格的边距

<table cellpadding="50">
	<tr>
		<td>表格</td>
		<td>表格</td>
		<td>表格</td>
	</tr>
</table>

8.表格单元格间距--cellspacing属性表示单元格间距

<table cellspacing="10">
	<tr>
		<td>表格</td>
		<td>表格</td>
		<td>表格</td>
	</tr>
</table>

9.表格的背景颜色--bgcolour属性表示表格的背景颜色

<table bgcolour=aqua>
	<tr>
		<td>表格</td>
		<td>表格</td>
		<td>表格</td>
	</tr>
</table>

10.表格的背景图像--background属性表示表格的背景图像,属性值为图片路径

<table  background="images/8.jpg">
	<tr>
		<td>表格</td>
		<td>表格</td>
		<td>表格</td>
	</tr>
</table>

11.表单跨行--td标签的colspan属性表示跨行,属性值为所跨行数

<table>
    <tr>
        <td>单元1</td>
        <td>单元2</td>
        <td>单元3</td>
    </tr>
    <tr>
        <td colspan="3" align="center">跨行单元格</td>
    </tr>
 </table>

12.单元格跨列--td标签的rowspan属性表示跨lie,属性值为所跨列数

<table>
    <tr>
        <td rowspan="2">跨列单元格</td>
        <td>单元2</td>
        <td>单元3</td>
    </tr>
    <tr>
        <td colspan="3" align="center">跨行单元格</td>
    </tr>
</table>

以上是我个人学习时总结的一些关于表格中一些常用的属性及使用方法.


标题:HTML5表格常用的一些属性
作者:tangdou
地址:https://www.mmzsblog.cn/articles/2020/07/26/1595732612730.html
-----------------------------
如未加特殊说明,此网站文章均为原创。
网站转载须在文章起始位置标注作者及原文连接,否则保留追究法律责任的权利。
公众号转载请联系网站首页的微信号申请白名单!

个人微信公众号 ↓↓↓                 

微信搜一搜 Java 学习之道