有时候我们需要在网页上展示一些数据，如某公司想在网页上展示公司的库存清单。如下表：

想在网页上展示上述表格效果可以使用以下代码：

创建表格的四个元素：

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标签，认识网页上的表格的更多相关文章

  1. <body>标签，网页上显示的内容放在这里

    在网页上要展示出来的页面内容一定要放在body标签中.如下图是一个新闻文章的网页. 在浏览器中的显示效果: 示例: <!DOCTYPE HTML> <html> <hea ...

  2. H5的video标签在网页上播放MP4视频时只有声音没有画面

    最近做一个项目时,发现mp4文件播放时没有图像,只有声音,代码检查了N次,都没有问题,就算是直接使用网上的实例代码,也只能播放实例视频,mp4文件绝对路径,相对路径也都试了,还是不能播放我的mp4. ...

  3. 网页上的表格数据table

    格式: <table> <tr> <th> </th> </tr> <tr> <td> </td> &l ...

  4. 利用h5标签在网页上播放音乐

    方案1: <embed src="等一分钟.mp3" id="aa"> <input type=button value=暂停 onclick ...

  5. html标签及网页语义化理解

    最近重新看了一遍html标签的知识,有很多新的体会,对语义化有了一个新的理解. 那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下使用此标签合理)比如,网页上的文章的标题就可以用标 ...

  6. 从零开始学习html（二）认识标签(第一部分)——上

    一.语义化,让你的网页更好的被搜索引擎理 学习html标签过程中,主要注意两个方面的学习:标签的用途.标签在浏览器中的默认样式. 标签的用途:我们学习网页制作时,常常会听到一个词,语义化. 那么什么叫 ...

  7. python 之 前端开发（form标签、单选框、多选框、file上传文件、按钮、label标签、下拉列表、textarea标签、fieldset标签、table标签）

    11.25 form标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  8. HTML——表格table标签，tr或者td

    表格定义和用法 <tr> 标签定义 HTML 表格中的行. tr 元素包含一个或多个 th 或 td 元素. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,tr 元素的 ...

  9. HTML5<canvas>标签:使用canvas元素在网页上绘制线条和圆(1)

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

随机推荐

  1. CELL_PHOTO_IDENTIFIER

    # define CELL_PHOTO_IDENTIFIER @"photoLibraryCell" # define CLOSE_PHOTO_IMAGE @"close ...

  2. 通过预编译头文件来提高C++ Builder的编译速度

    C++ Builder是最快的C++编译器之一,从编译速度来说也可以说是最快的win32C++编译器了.除了速度之外,C++builder的性能也在其它C++编译器的之上,但许多Delphi程序员仍受 ...

  3. Netty4.0学习笔记系列之一：Server与Client的通讯

    http://blog.csdn.net/u013252773/article/details/21046697 本文是学习Netty的第一篇文章,主要对Netty的Server和Client间的通讯 ...

  4. myisam和innodb索引实现的不同

    1.MyISAM 使用B+Tree 作为索引结构,叶子节点的data存放指针,也就是记录的地址.对于主键索引和辅助索引都是一样的.2.InnoDB 也使用B+Tree作为索引结构,也别需要注意的是,对 ...

  5. Keepalived实现Redis Failover

    一.环境说明 操作系统版本:RHEL 5.4_64 redis版本:2.8.17 keepalived版本:1.1.15 master:10.142.130.81 slave:  10.142.130 ...

  6. HDU Collect More Jewels 1044

    BFS + 状态压缩 险过 这个并不是最好的算法 但是写起来比较简单 , 可以AC,但是耗时比较多 下面是代码 就不多说了 #include <cstdio> #include <c ...

  7. 【转】java中float与byte[]的互转 -- 不错

    原文网址:http://tjmljw.iteye.com/blog/1767716 起因:想把一个float[]转换成内存数据,查了一下,下面两个方法可以将float转成byte[]. 方法一 imp ...

  8. Android 开发无线调试

    在进行android开发的时候有时候总是连接不上设备,因为设备的USB进行频繁插拔之后会导致一定的损坏.所以在设备已经无法利用数据线进行连接开发工具的时候就需要有那么一个功能,那就是无线调试,是不是感 ...

  9. JavaScript中的运动数学函数（持续更新）

    经常需要实现JS的动画效果,就会用到如下的一些数学的东西. 二次方运动,从0开始加速: var f=function(t,orgvalue,changevalue,runtime){ var t=t/ ...

  10. 《A First Course in Probability》-chaper1-组合分析-方程整数解的个数

    在概率论问题中求解基本事件.某个事件的可能情况数要涉及到组合分析. 而这一部分主要涉及到简单的计数原理和二项式定理.多项式定理. 我们从一个简单的实例入手. 方程的整数解个数: Tom喜欢钓鱼,一直他 ...