表格是html中经常使用到的,简单的使用可能很多人都没问题,但是更深入的了解的人恐怕不多,下面我们先来看一下如何使用。

<table>是<tr>的上层标签

<tr>必须在一个<table></table>里面,它不能单独使用,相当于<table>的属性标签.

<table>标示一个表格,<tr>标示这个表格中间的一个行

<td>标示行中的一个列,需要嵌套在<tr></tr>中间

具体格式是:(两行两列)  
<table>

<tr>

<td></td>

<td></td>

</tr>

</teble>

<th>和<td>一样,也是需要嵌套在<tr>当中的,<tr>嵌套在<table>当中

<table>...</table>
用于定义一个表格开始和结束

<th>...</th>
定义表头单元格。表格中的文字将以粗体显示(<TH>与<TD>同样是标示一个储存格,唯一不同的是<TH>所标示的储存格中的文字是以粗体出现,即可以这样看:

<th>文字</th>=<td><b>文字</b></td>

),
在表格中也可以不用此标签,<th>标签必须放在<tr>标签内

<tr>...</tr>
定义一行标签,一组行标签内可以建立多组由<td>或<th>标签所定义的单元格

<td>...</td>
定义单元格标签,一组<td>标签将将建立一个单元格,<td>标签必须放在<tr>标签内

。<th>为表格标题,属性summar为摘要,<caption>标签为首部说明,<thead>标签为表格头部,<tbody>标签为表格主体内容,<tfoot>标签为表格尾部。

其中还可以使用scope 可用于取代headers属性,标记含有表头信息的单元格,其中各数值的内容如下:
 row 指示当前单元格,为包含当前单元格的行提供相关的表头信息。
 col 指示当前单元格,为根据当前单元格指定的列提供相应的表头信息。
 rowgroup 指示当前单元格,为包含当前单元格的其余行组提供相关的表头信息。
 colgroup 指示当前单元格,为根据当前单元格指定的其余列组提供相应的表头信息。
abbr 用于定义表头单元格中的缩写名,如果没有定义该属性,则将默认单元格内容为节略形式。
标准表格模型
 <table>
       
<caption></caption>

<thead>
           
<tr>
               
<th></th>

</tr>
       
</thead>
       
<tbody>
           
<tr>
               
<td></td>

</tr>
       
</tbody>
       
<tfoot>
           
<tr>
               
<td></td>

</tr>
       
</tfoot>
   
</table>

相关:

<th>不光是粗体,还是居中的
<caption>也是居中的,而且如果table有border的话则caption不在border之内

TFOOT 元素内包含的有效标签有:  
TD  
TH  
TR  
任何给定的 table 对象都只能定义一个 tFoot

html表格中的tr td th用法的更多相关文章

  1. jQuery遍历table中的tr td并获取td中的值

    jQuery遍历table中的tr td并获取td中的值 $(function(){ $("#tableId tr").find("td").each(func ...

  2. HTML中表格元素TABLE,TR,TD及属性的语法

    table:表格元素及属性 <table width="80%" border="1" cellspacing="1" cellpad ...

  3. html中table,tr,td

    table表格,tr表格中的行,tr表格中的列,等级关系是table>tr>td, 当然表格中还包括thead,tbody,tfoot,th,但由于浏览器支持缘故很少使用.另外table在 ...

  4. html5 表格标签 table tr td

      最重要的三个 <table>     表格声明标签 属性: boarder    边框粗细 style    可配合css 使用 <tr>    行标签 table row ...

  5. java web程序 html标签中<th>和<td>的用法区别:

    <th>是用于表头式的 <td>是列 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional ...

  6. 关于html中table表格tr,td的高度和宽度

    关于html中table表格tr,td的高度和宽度 关于html中table表格tr,td的高度和宽度 做网页的时候经常会遇到各种各样的问题,经常遇到的一个就是会碰到表格宽度对不齐的问题.首先,来分析 ...

  7. HTML 表格<table><caption><th><tr><td><thead><tbody><tfoot><col><colgroup>

    <table>标签: 定义和用法: <table>标签定义HTML表格. 简单的HTML表格由table元素以及一个或多个tr.th或td元素组成. tr元素定义表格行,th元 ...

  8. HTML表格,table,thead,tbody,tfoot,th,tr,td,的属性以及跨行,跨列

    在HTML中表格是作为一个整体来解析的,解析完才会在页面显示,如果表格很复杂很长,加载时间很长,用户体验就不好.所以这里就要用到表格结构标签,解析一部分就显示一部分,不用等表格全部加载完再显示. 表格 ...

  9. jQuery遍历Table tr td td中包含标签

    function shengchen() { var arrTR = $("#tbModule").children(); var Context=""; $( ...

随机推荐

  1. Spark 基础及RDD基本操作

    什么是RDD RDD(Resilient Distributed Dataset)叫做分布式数据集,是Spark中最基本的数据抽象,它代表一个不可变.可分区.里面的元素可并行计算的集合.RDD具有数据 ...

  2. Flume1.5.0入门:安装、部署、及flume的案例

    转自:http://www.aboutyun.com/thread-8917-1-1.html 问题导读1.什么是flume2.flume的官方网站在哪里?3.flume有哪些术语?4.如何配置flu ...

  3. jenkins配置过程遇到的问题

    jenkins 搭建完成后,可以浏览器访问: http://localhost:8081/jenkins, 新建任务过程中遇到以下问题: 1. 源码管理不现实git, 只显示无 解决: 插件管理 -  ...

  4. Maven学习日记(一)----构建web项目

    创建maven-web项目: dos进入workspace目录: D:\workspace>mvn archetype:create -DgroupId=org.sonatype.mavenbo ...

  5. 【转】WCF入门教程一[什么是WCF]

    一.概述 Windows Communication Foundation(WCF)是由微软发展的一组数据通信的应用程序开发接口,可以翻译为Windows通讯接口,它是.NET框架的一部分.由 .NE ...

  6. CommonJS初识

    CommonJS是什么 CommonJS是一个标准库,或者说是一组规范.因为官方并没有给出真正的代码实现,而是给出一些代码组织规范.常用模块的api.包(Package)的命名规范和具体格式. Com ...

  7. linux -- 管道“|”

    利用Linux所提供的管道符“|”将两个命令隔开,管道符左边命令的输出就会作为管道符右边命令的输入.连续使用管道意味着第一个命令的输出会作为 第二个命令的输入,第二个命令的输出又会作为第三个命令的输入 ...

  8. C#接口之IEnumerable,IEnumerator

    IEnumerable 截图来源于https://msdn.microsoft.com/zh-cn/library/system.collections.ienumerable.getenumerat ...

  9. 【Java集合的详细研究7】Set和List 的关系与区别

    两个接口都是继承自Collection. List (inteface) 次序是List 的最重要特点,它确保维护元素特定的顺序. --ArrayList 允许对元素快速随机访问. --LinkedL ...

  10. ueditor1.4.3配置过程(包含单独上传文件以及图片的使用),ueditor1.4.3上传配置(转 http://www.bkjia.com/webzh/1001016.html)

    这里使用的是ueditor1.4.3的jsp版本的UTF-8版本. 首先下载相应的ueditor,将ueditor文件夹直接拷贝到项目中,文件结构如下所示: 然后将项目要用的jar包导入到lib目录下 ...