table标签,认识网页上的表格
有时候我们需要在网页上展示一些数据,如某公司想在网页上展示公司的库存清单。如下表:
想在网页上展示上述表格效果可以使用以下代码:
创建表格的四个元素:
table、tbody、tr、th、td
1、<table>…</table>:整个表格以<table>
标记开始、</table>
标记结束。
2、<tbody>…</tbody>:table body, 当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
3、<tr>…</tr>:table row, 表格的一行,所以有几对tr 表格就有几行。
4、<td>…</td>:table data, 表格的一个单元格,一行中包含几对<td>...</td>
,说明一行中就有几列。
5、<th>…</th>:table head, 表格的头部的一个单元格,表格表头。
6、表格中列的个数,取决于一行中数据单元格的个数。
上述代码在浏览器中显示的默认的样式为:
总结:
1、table表格在没有添加css样式之前,在浏览器中显示是没有表格线的
2、表头,也就是th标签中的文本默认为粗体并且居中显示
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>认识table表标签</title>
</head>
<body>
<table>
<tbody>
<tr>
<th>班级</th>
<th>学生数</th>
<th>平均成绩</th>
</tr>
<tr>
<td>一班</td>
<td>30</td>
<td>89</td>
</tr>
<tr>
<td>二班</td>
<td>35</td>
<td>85</td>
</tr>
<tr>
<td>三班</td>
<td>32</td>
<td>80</td>
</tr>
</tbody>
</table>
</body>
</html>
table标签,认识网页上的表格的更多相关文章
- <body>标签,网页上显示的内容放在这里
在网页上要展示出来的页面内容一定要放在body标签中.如下图是一个新闻文章的网页. 在浏览器中的显示效果: 示例: <!DOCTYPE HTML> <html> <hea ...
- H5的video标签在网页上播放MP4视频时只有声音没有画面
最近做一个项目时,发现mp4文件播放时没有图像,只有声音,代码检查了N次,都没有问题,就算是直接使用网上的实例代码,也只能播放实例视频,mp4文件绝对路径,相对路径也都试了,还是不能播放我的mp4. ...
- 网页上的表格数据table
格式: <table> <tr> <th> </th> </tr> <tr> <td> </td> &l ...
- 利用h5标签在网页上播放音乐
方案1: <embed src="等一分钟.mp3" id="aa"> <input type=button value=暂停 onclick ...
- html标签及网页语义化理解
最近重新看了一遍html标签的知识,有很多新的体会,对语义化有了一个新的理解. 那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下使用此标签合理)比如,网页上的文章的标题就可以用标 ...
- 从零开始学习html(二)认识标签(第一部分)——上
一.语义化,让你的网页更好的被搜索引擎理 学习html标签过程中,主要注意两个方面的学习:标签的用途.标签在浏览器中的默认样式. 标签的用途:我们学习网页制作时,常常会听到一个词,语义化. 那么什么叫 ...
- python 之 前端开发(form标签、单选框、多选框、file上传文件、按钮、label标签、下拉列表、textarea标签、fieldset标签、table标签)
11.25 form标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- HTML——表格table标签,tr或者td
表格定义和用法 <tr> 标签定义 HTML 表格中的行. tr 元素包含一个或多个 th 或 td 元素. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,tr 元素的 ...
- HTML5<canvas>标签:使用canvas元素在网页上绘制线条和圆(1)
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
随机推荐
- JavaScript----Performance Tool and Process
1. Syntax-------------JSLint, JSHint, 2. Combine------------YUI 3. Minify---------------JSMin
- City Game
hdu1505:http://acm.hdu.edu.cn/showproblem.php?pid=1505 题解:给你一个字符矩阵,里面有R和F两种字符,然后让你找一个最大的子矩阵,这个最大的子矩阵 ...
- 分页查询SQL
SELECT * FROM ( SELECT T.*, ROWNUMBER() OVER() AS ROWNUM FROM ( SELECT L4_GDS_GROUP_CD C ...
- 一句话改变TGraphicControl控件的left坐标的前世今生
稍微用脑子想了一下,图形控件没有句柄,因此先把自己的坐标改一改,然后只要把父控件的某些区域Invalidate一下就可以了,WM_PAINT消息一来,父控件就会重绘所有子图形控件,就达到了相应的效果. ...
- 【HDOJ】2405 Marbles in Three Baskets
BFS+状态压缩. /* 2405 */ #include <iostream> #include <queue> #include <cstdio> #inclu ...
- 【HDOJ】2699 Five in a Row
wa了几次,至少要考虑4个方向:下.右.左下.右下.很像当年北航的机试题目. /* 2699 */ #include <iostream> #include <cstdio> ...
- 快速创建php server
mkdir testmv test.html testphp -S localhost:8082http://localhost:8082/test.html
- BZOJ 1029 [JSOI2007]建筑抢修 已更新
1029: [JSOI2007]建筑抢修 Time Limit: 4 Sec Memory Limit: 162 MBSubmit: 2748 Solved: 1213[Submit][Statu ...
- COJ 3007 Mr.Yang的小助手
传送门:http://oj.cnuschool.org.cn/oj/home/problem.htm?problemID=1037 试题描述: 信息学社团已经逐渐发展壮大,成员也越来越多.现在,有n个 ...
- Struts2再爆远程代码执行漏洞
Struts又爆远程代码执行漏洞!在这次的漏洞中,攻击者可以通过操纵参数远程执行恶意代码.Struts 2.3.15.1之前的版本,参数action的值redirect以及redirectAction ...