HTML——表格标签

表格标签

表格它是以“列”与“行”的方式来展示数据，可读性较好。

HTML 表格由 <table> </table>标签来定义
每个表格包含若干行，由 <tr> </tr>标签定义,需要嵌套在<table> </table>标签中
每行又可分割为若干单元格，由 <td> </td>标签定义，需要嵌套在<td> </td>标签中
每个单元格中可以包含文本、图片、列表、表单、表格等
<caption> 表格标题
<thead> 表格头
<tbody> 表格体
<tfoot> 表格尾

表头单元格标签

用于表格第一行或第一列，其单元格里的文字内容会加粗居中显示，由<th> </th>标签定义

创建表格简单的基本语法格式如下：
<table border="1"><caption>表格标题</caption><thead><tr><th>表头1</th><th>表头2</th></tr> </thead><tbody><tr><td>内容1</td><td>内容2</td>......</tr><tr><td>内容3</td><td>内容4</td>......</tr></tbody>
</table>

表格属性(需写到table标签中)

border属性：值为1表示显示边框，值为0则表示不显示（默认情况是不显示边框的，但大多数情况下，我们还是希望将边框显示出来，所以这个属性还是很重要的）
cellpadding属性：设置单元格内边距（默认为1像素）
cellspacing属性：设置单元格之间的空间（默认为2像素）
bgcolor属性：设置表格内颜色
align属性：设置单元格左右对齐方式，属性值分别有center、left和right
valign属性：设置单元格上下对齐方式，属性值分别有top、middle和bottom
合并单元格属性：colspan用来合并列，rowspan用来合并行
width和height属性：用来规定表格的宽度和高度，属性值为像素值或百分比

代码示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人简历</title>
</head>
<body><center><form action="#" method="post"><h3>个人简历</h3><table border="1"><tr><td align="center" style="width:100px">姓名</td><td><input type="text" style="width:156px"></td><td align="center" style="width:100px">性别</td><td><input type="text" style="width:156px"></td><td align="center" style="width:100px">出生年月</td><td><input type="text" style="width:156px"></td><td rowspan="4" style="width:150px"><input type="file"></td></tr><tr><td align="center">民族</td><td><input type="text"></td><td align="center">政治面貌</td><td><input type="text"></td><td align="center">身高</td><td><input type="text"></td></tr><tr><td align="center">学制</td><td><input type="text"></td><td align="center">学历</td><td><input type="text"></td><td align="center">户籍</td><td><input type="text"></td></tr><tr><td align="center">专业</td><td><input type="text"></td><td  align="center" colspan="2" >毕业学校</td><td colspan="2"><input type="text" style="width:262px"></td></tr><tr><td colspan="7" style="text-align:center"><strong>技能、特长或爱好</strong></td></tr><tr><td align="center">外语等级</td><td colspan="2"><input type="text" style="width:262px"></td><td align="center">计算机</td><td colspan="3"><input type="text" style="width:522px"></td></tr><tr><td colspan="7" style="text-align:center"><strong>个人履历</strong></td></tr><tr><td align="center">时间</td><td colspan="2" align="center">单位</td><td align="center" colspan="4">经历</td></tr><tr><td><input type="text"></td><td colspan="2"><input type="text" style="width:262px"></td><td colspan="4"><input type="text" style="width:692px"></td></tr><tr><td><input type="text"></td><td colspan="2"><input type="text" style="width:262px"></td><td colspan="4"><input type="text" style="width:692px"></td></tr><tr><td><input type="text"></td><td colspan="2"><input type="text"style="width:262px"></td><td colspan="4"><input type="text" style="width:692px"></td></tr><tr><td colspan="7" style="text-align:center"><strong>联系方式</strong></td></tr><tr><td align="center">通信地址</td><td colspan="2"><input type="text" style="width:262px"></td><td align="center">联系电话</td><td colspan="3"><input type="text" style="width:522px"></td></tr><tr><td align="center">E-mail</td><td colspan="2"><input type="text" style="width:262px"></td><td align="center">邮编</td><td colspan="3"><input type="text" style="width:522px"></td></tr><tr><td colspan="7" style="text-align:center"><strong>自我评价</strong></td></tr></table></form></center>
</body>
</html>

结果如下图所示：

HTML——表格标签相关推荐

html表格重置标签,HTML——表格标签
存在即是合理的. 表格的现在还是较为常用的一种标签,但不是用来布局,常见处理.显示表格式数据. 表格的应用场景: 1 创建表格在HTML网页中,要想创建表格,就需要使用表格相关的标签.创建表格的基本 ...
html表格标签模板实现跨行和跨列
网站首页显示页面1.表格标签<table border="" width="" height="" align="" ...
python全栈开发 * 表格标签表单标签 css 引入方式 * 180807
html部分一.表格标签<table> 1.一个表格<table>由每行<tr>组成的,每行是由<td>组成的. 注意: 一个表格是由行组成的(行是由 ...
html 怎么让tr的css覆盖td的_html表格标签
HTML表格标签表格是一种组织整理数据的手段,在HTML当中表格使用<table> 标签来定义.每个表格均有若干行(由<tr> 标签定义),每行被分割为若干单元格(由 < ...
html 表格_【HTML】3 表格标签
1.表格标签表格主要作用:用于显示.展示数据,可以让数据显示的非常规整,可读性好. 2.表格属性注:此处是为了更直观看到表格的样子,理解基本属性的作用,实际应用中,样式属性多在CSS中设置. 3. ...
Html 教程（5）表格标签
1. HTML 表格标签标签描述 <table> 定义表格 <th> 定义表格的表头 <tr> 定义表格的行 <td> 定义表格单元 <cap ...
HTML5中各种标签总结（列表标签、表格标签）
无序列表<ul></ul> type:可以设置列表前图标的样式 type="square" 有序列表<ol></ol> type:可 ...
html5列表标签代码,HTML5列表标签和表格标签(示例代码)
一.列表 1.1 什么是列表标签? 作用:给一堆数据添加列表语义,也就是告诉搜索引擎告诉浏览器这一对数据是一个整体无序列表---unordered-list(最多):新闻列表.导航.商品列表作用: ...
标签的宽度_27 表格标签
成长是一辈子的事儿!大家好!我是时问新.分享前端.Python等技术,以及个人成长路上的那些事儿. 一般我们看到的表格,会说它有几行几列. 而在HTML中的表格,并不是简单的说几行几列,是一行中给它设 ...
Web前端开发笔记——第二章 HTML语言第七节表格标签
目录一.表格标签的定义二.表格标签的属性 (一)边框属性 (二)单元格属性三.表格标签的表头表头属性四.表格标签的标题五.表格标签的嵌套结语一.表格标签的定义在html中,表格标签表 ...

HTML——表格标签

表格标签

表头单元格标签

表格属性(需写到table标签中)

代码示例

HTML——表格标签相关推荐

最新文章

热门文章