前端学习笔记:表格篇
1、创建表格
基础知识:
创建表格的四个元素:table、tr、th、td
1、<table>…table>:整个表格以<table>标记开始、table>标记结束
2、<tr>…tr>:表格的一行,所以有几对tr 表格就有几行。
3、<td>…td>:表格的一个单元格,一行中包含几对<td>...td>,说明一行中就有几列。
4、<th>…th>:表格的头部的一个单元格,表格表头。th用来设置表格的标题,会加粗居中显示。也就是th标签中的文本默认为粗体并且居中显示。
5、表格中列的个数,取决于一行中数据单元格的个数。
6、border属性可以为表格添加边框,属性值为数字。table表格在没有添加border属性之前, 在浏览器中显示是没有表格线的。
7、caption标签用来定义表格的标题。
exp:

<html><head><meta charset="UTF-8"><title>学习表格标签title>
head><body><caption>前端三剑客caption><tr><th>知识点th><th>重要程度th><th>难度th><th>学习周期th>tr><tr><td>htmltd><td>5星td><td>3星td><td>7天td>tr><tr><td>csstd><td>5星td><td>4星td><td>10天td>tr><tr><td>jstd><td>5星td><td>5星td><td>20天td>tr>
table>
body>html>
2、使用thead、tbody、tfoot创建表格
1、thead:标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
2、tbody:如果不加 , table表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。(通俗理解table 可以按结构一块块的显示,不在等整个表格加载完后显示。)
3、tfoot:元素用于对 HTML 表格中的表注(页脚)内容进行分组。
4、thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。
exp:

<html>
<head><meta charset="UTF-8"><title>使用thead、tbody、tfoot标签title>
head>
<table border="2"><caption>成绩表caption><thead><tr><td>科目td><td>分数td>tr>thead><tbody><tr><td>语文td><td>99td>tr><tr><td>数学td><td>60td>tr>tbody><tfoot><tr><td>总分td><td>159td>tr>tfoot>
table>
html>
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!
