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>
时间: 2024-08-16 20:57:26

table标签,认识网页上的表格的相关文章

&lt;body&gt;标签,网页上显示的内容放在这里

在网页上要展示出来的页面内容一定要放在body标签中.如下图是一个新闻文章的网页. 在浏览器中的显示效果: 示例: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>了不起的盖茨比</title> </head> <bo

网页上的表格数据table

格式: <table> <tr> <th> </th> </tr> <tr> <td> </td> </tr> </table> table四个要素: 1,table,整个表格以<table>开始,以</table>结束 2,<tr></tr>有几对,表示表格有几行 3,<th></th>表示表头的单元格 4,<

用代码在网页上做表格

代码如图: 效果如图:

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

方案1: <embed src="等一分钟.mp3" id="aa"> <input type=button value=暂停 onclick="aa.pause();"> <input type=button value=播放 onclick="aa.play();"> 方案2: <audio id="aaa" src="等一分钟.mp3" a

html标签及网页语义化理解

最近重新看了一遍html标签的知识,有很多新的体会,对语义化有了一个新的理解. 那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下使用此标签合理)比如,网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签.文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用 em 标签表示强调等等. 语义化的好处主要有两个方面: 1. 更容易被搜索引擎收录. 2. 更容易让屏幕阅读器读出网页内容.(屏幕阅读器是一种软件,用来将文字.图形以及电脑接

如何直接获取网页上的数据到工作表

这个网页上的数据不能复制,如何获取网页中的数据到Excel工作表中呢?(常见问题)如何提取网页上的表格数据怎么利用excel获取网上数据如何实时获取网页上的数据信息[资料来源于网络搜索:王西猛讲师的网络课堂][解决方法,wangqiang博客推荐视频教程] wangqiang博客推荐视频教程 原文地址:http://blog.51cto.com/13172026/2289258

WEB前端开发学习----2.HTML表格table标签

[html] view plaincopy css没用流行之前,网页都是用表格,也就是table标签制作的.虽然现在不用table做网页了,但是我们还是应该掌握这个标签.</span> 先给出最表格的基本格式: [html] view plaincopy <table> <tr> <tb> </tb> </tr> <table> 其中<tr>为行标签,即表格的行.<td>为单元格数据标签.也就是说一

HTML——表格table标签,tr或者td

表格定义和用法 <tr> 标签定义 HTML 表格中的行. tr 元素包含一个或多个 th 或 td 元素. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,tr 元素的 "bgcolor" 是不被赞成使用的. 在 XHTML 1.0 Strict DTD 中,tr 元素的 "bgcolor" 是不被支持的. 可选的属性 属性 值 描述 align right left center justify char 定义表格行的内容对齐方式.

如何用&lt;dl&gt;标签做表格而不用table标签

我们都知道很多的内容编辑器(TinyMCE编辑器.fck)都有插入表格功能,快速方便,但是这些表格用到的<table>标签,可以查看html源代码就能发现,table标签对搜索引擎不是很友好,table太多话可能无法被SE收录,有没办法用其他方法来实现绘制表格呢?比如用<dl>标签? <dl> 标签是定义列表(definition list),结合<dt>(定义列表中的项目)和<dd>(描述列表中的项目),并将它们设置为同行显示就能实现表格的效果