您的位置：首页 > Web前端 > HTML

HTML之表格的创建以及使用

2017-08-21 18:55 232 查看
HTML常用标签的用法以及介绍

以下代码可以使用网络html运行，或者使用HBuilder，本人使用在HBuilder环境下运行实例：

下面网址是是网络HTML运行器：

HTML/CSS/Javascript在线代码运行工具

1. 表格属性以及介绍

1.1 表格由行与列构成，中间有若干个单元格。早期表格可用来网页的布局，现在 更多是容纳文本数据。

1.2 表格由 table,tr,th,td这几个标签构成：

table:最外层元素

th:表格标题头元素

td:一般单元格元素

caption:表格的标题

1.3 单元格可以占多行或多列，称其为单元的合并

- colspan属性指定单元格跨几列

- rowspan属性指定单元格跨几行

注意:

表格默认是没有边框，使用border属性指示边框的粗线，cellspacing属性指示单元格与单元格的间隙。

2.实例源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>

<table border="1px" cellspacing="1px" >
<tr bgcolor="#FF4500">
<th >标题1</th>
<th>标题2</th>
<th>标题3</th>
<th>标题4</th>
</tr>
<tr>
<th>内容01</th>
<th>内容02</th>
<th>内容03</th>
<th>内容04</th>
</tr>
<tr>
<th>内容001</th>
<th>内容002</th>
<th>内容003</th>
<th>内容004</th>
</tr>
</table>

<br /><br />

<table border="1px" cellspacing="1px">
<caption>———表格———</caption>
<tr bgcolor="#00FFFF">
<th rowspan="2">标题1</th>
<th colspan="2">标题2</th>
</tr>
<tr>
<th>标题3</th>
<th>标题4</th>
</tr>
<tr>
<th>内容</th>
<th>内容</th>
<th>内容</th>
</tr>
<tr>
<th>内容</th>
<th>内容</th>
<th>内容</th>
</tr>
<tr>
<th>内容</th>
<th>内容</th>
<th>内容</th>
</tr>
</table>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航