订阅博客
收藏博客
微博分享
QQ空间分享

html表格基本用法

频道:前端 标签: 时间:2019年07月09日 浏览:53次 评论:3条
作者: 三只松果

创建表格

创建表格的基本语法:

<table> <tr>

<td> 单元格内容 </td> </tr>

</table>

创建表格时,一般情况下分3步:
第一步:创建表格标签< table>...</table>。 第二步:在表格标签table>...</table>里创建行标签<tr>...</tr>,

可以有多行。 第三步:在行标签<tr>...</tr>里创建单元格标签<td>...</td>,可

以有多个单元格。


表格的属性

image.png


caption 元素定义表格标题

caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个 标题。通常这个标题会被居中于表格之上。

image.png


<th>标记及其属性

表头一般位于表格的第一行或第一列,其文本加粗居中,如下图所 示,即为设置了表头的表格。设置表头非常简单,只需用表头标记 <th></th>替代相应的单元格标记<td></td>即可。

image.png


表格的结构

在使用表格进行布局时,可以将表格划分为头部、主体和页脚,具 体 如下所示:

<thead></thead>:用于定义表格的头部,必须位于<table></ table>标记中,一般包含网页的logo和导航等头部信息。

<tfoot></ tfoot >:用于定义表格的页脚,位于<table></table>标 记中<thead></thead>标记之后,一般包含网页底部的企业信息等。

<tbody></tbody>:用于定义表格的主体,位于<table></table>标 记中<tfoot></ tfoot >标记之前,一般包含网页中除头部和底部之外的其 他内容。



代码练习:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

table th{
width: 40px;
}
table td{
width: 50px;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>

<!-- border设置边框宽度,cellspacing设置单元格间距,cellpadding设置文字和单元格间的距离,align设置对齐方式 -->
<table border="1" cellspacing="1" cellpadding="3" width="300px" height="100px" bgcolor="#5F9EA0">
<caption>表格名</caption>
<!-- rowspan合并行,colspan合并列 -->
<tr  bgcolor="#A52A2A"><th rowspan="2">Header</th><th colspan="2">Header</th></tr>
<tr ><td>Data</td><td>Data</td></tr>
</table>
<hr >

<fieldset id="" style="width: 400px;">
<legend>身份信息</legend>
<table width="400" height="180" border="1" cellspacing="0" cellpadding="5px" style="float: left;">
<tr><td colspan="5" bgcolor="#5F9EA0">基本信息</td></tr>
<tr><th>姓名</th><td>蔡徐坤</td><th>性别</th><td>男</td><td rowspan="2" width="80px"><div style="float: right;">
<img  height="120px" src="cxk.gif" >
</div></td></tr>
<tr><th>时长</th><td>两年半</td><th>特长</th><td>ctrl</td></tr>
</table>
</fieldset>

</body>
</html>


效果展示:



表格名
HeaderHeader
DataData

身份信息
基本信息
姓名蔡徐坤性别
时长两年半特长ctrl

文章评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。