`
liujun11
  • 浏览: 21160 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

table <tr><th><tb>的区别

 
阅读更多

(1)先说<tr>标签

<table>是<tr>的上层标签
<tr>必须在一个<table></table>里面,它不能单独使用,相当于<table>的属性标签. 
<tr>...</tr> 定义一行标签,一组行标签内可以建立多组由<td>或<th>标签所定义的单元格。
<table>标示一个表格,<tr>标示这个表格中间的一个行 
<td>标示行中的一个列,需要嵌套在<tr></tr>中间

这里是一个例子:(两行两列) 

Java代码 
  1. <table>   
  2. <tr>   
  3. <td>名称</td>  
  4. <td>数量</td>   
  5. </tr>   
  6. </table>  

 

 

(2)<th>标签

<th>是需要嵌套在<tr>当中的,<tr>嵌套在<table>当中
<th>...</th> 定义表头单元格。表格中的文字将以粗体显示。<th>与<td>同样是标示一个储存格,有一点不同的是<th>所标示的储存格中的文字是以粗体出现,可以看成:
<th>网站制作</th>的显示效果相当于<td><b>文字</b></td>

在使用的时候,<th>标签必须放在<tr>标签内

 

(3)<td>标签

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

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

提示:经常应常用就会遇到的一些不同:

<th>不光是粗体,还是居中的
<caption>也是居中的,而且如果table有border的话则caption不在border之内
tfood 元素内包含的有效标签有: 
td 
th
tr
任何给定的 table 对象都只能定义一个tfoot。

 

制作表格的基本代码格式: 

Java代码 
  1. <table>  
  2. <caption></caption>  
  3. <thead>  
  4. <tr>  
  5. <th></th>  
  6. </tr>  
  7. </thead>  
  8. <tbody>  
  9. <tr>  
  10. <td></td>  
  11. </tr>  
  12. </tbody>  
  13. <tfoot>  
  14. <tr>  
  15. <td></td>  
  16. </tr>  
  17. </tfoot>  
  18. </table>  
分享到:
评论

相关推荐

    Html中用table画斜线

    一个简单的表格由`&lt;table&gt;`标签开始,包含若干行`&lt;tr&gt;`(表格行)和列`&lt;td&gt;`(表格数据单元格)。例如: ```html &lt;table&gt; &lt;tr&gt; &lt;td&gt;内容1&lt;/td&gt; &lt;td&gt;内容2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;内容3&lt;/td&gt; &lt;td&gt;内容4&lt;/td&gt; ...

    php分页技术

    &lt;th&gt;liuyan&lt;/th&gt; &lt;th&gt;time&lt;/th&gt; &lt;/tr&gt; &lt;?php while($rows=mysql_fetch_assoc($result)){ echo "&lt;tr&gt;"; echo "&lt;td&gt;{$rows['id']}&lt;/td&gt;"; echo "&lt;td&gt;{$rows['name']}&lt;/td&gt;"; ...

    Javascript遍历table中的元素示例代码

     &lt;tr&gt;&lt;th&gt; &lt;/th&gt;&lt;th&gt; &lt;/th&gt;&lt;th&gt; &lt;/th&gt;&lt;th&gt; &lt;/th&gt;&lt;/tr&gt;  &lt;tr&gt;&lt;td&gt; &lt;/td&gt;&lt;td&gt; &lt;/td&gt;&lt;td&gt; &lt;/td&gt;&lt;td&gt; &lt;/td&gt;&lt;/tr&gt;  &lt;tr&gt;&lt;td&gt; &lt;/td&gt;&lt;td&gt; &lt;/td&gt;&lt;td&gt; &lt;/td&gt;&lt;td&gt; &lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; 而在JS中如何遍历赋值呢...

    【JavaScript源代码】JavaScript实现复选框全选或全取消操作.docx

    &lt;th&gt;&lt;input type="checkbox" id="cbAll"&gt;&lt;/th&gt; &lt;th&gt;运动&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody id="tb"&gt; &lt;tr&gt; &lt;td&gt;&lt;input type="checkbox" value="1"&gt;&lt;/td&gt; &lt;td&gt;跑步&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;input type="checkbox" ...

    详解在table设置max-width以及min-width兼容问题和解决方案

    &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; table{min-width:60%;min-width:100%;} 但是chrome不兼容max-width,ie7两者都不兼容。 解决方案:在table外层包一个div,在div上设置min-width和max-width &lt;div class=...

    js/jQuery实现全选效果

    &lt;table id="j_tb"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;&lt;input type="checkbox" id="j_cbAll"&gt;&lt;/th&gt; &lt;th&gt;Column 1&lt;/th&gt; &lt;th&gt;Column 2&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;&lt;input type="checkbox"&gt;&lt;/td&gt; &lt;td&gt;Row 1, ...

    jsp 分页代码大全

    &lt;th&gt;标题id&lt;/th&gt; &lt;th&gt;内容表&lt;/th&gt; &lt;/tr&gt; &lt;% if(intPageCount&gt;0) { //将记录指针定位到待显示页的第一条记录上 sqlRst.absolute((intPage-1) * intPageSize + 1); //显示数据 i = 0; while(i&lt;int...

    springmvc 文件上传 controller+jsp代码

    &lt;table id="tb" class="tableStyle" formMode="view"&gt; &lt;tr&gt; &lt;th colspan="2"&gt;上传文件&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td width="150"&gt;选择文件:&lt;/td&gt; &lt;td&gt;&lt;input type="file" id="file" name="file"/&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/...

    Java Web应用开发:展示全部商品.docx

    List&lt;Product&gt; productList = new ArrayList&lt;&gt;(); String sql = "SELECT * FROM tb_product"; try (Connection conn = DBConnection.getConnection(); PreparedStatement pstmt = conn.prepareStatement(sql);...

    js验证账户名是否重复

    &lt;table class=tb_input&gt; &lt;tbody&gt; &lt;tr&gt; &lt;th&gt;名称&lt;strong class=red&gt;*&lt;/strong&gt;&lt;/th&gt; &lt;td&gt; &lt;input type=text name=sysRight.name id=sysRight.name value=&lt;#if sysRight.name??&gt;${sysRight.name!}&lt;/#...

    JQueryEasyUI学习笔记(十一)源码

    &lt;th field="name" width="100" frozen="true"&gt;姓名&lt;/th&gt; &lt;th field="price" width="100"&gt;价格&lt;/th&gt; &lt;th field="amount" width="100"&gt;数量&lt;/th&gt; &lt;th field="total" width="100"&gt;总价&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;/...

    JS 实现Table相同行的单元格自动合并示例代码

    一个HTML表格由多个`&lt;table&gt;`标签组成,表格中可以包含行(`&lt;tr&gt;`)和单元格(`&lt;td&gt;`或`&lt;th&gt;`)。`&lt;td&gt;`用于数据单元格,而`&lt;th&gt;`用于表头单元格。表格中的每个单元格可以跨越多个行或列,分别通过`rowSpan`和`...

    js高级表格排序 教程&使用方法

    &lt;table width="550" align="center" cellpadding="0" cellspacing="0" id="tb_1"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th width="7%" onclick="sortTable('tb_1', 0)" style="cursor:pointer;"&gt;代码&lt;/th&gt; &lt;th onclick="sortTable('tb...

    easyUI点击按钮后上下移动功能

    &lt;th field="status" width="60"&gt;状态&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;/table&gt; &lt;div id="tb"&gt; &lt;a href="javascript:void(0)" class="easyui-linkbutton" onclick="moveRow('up')"&gt;上移&lt;/a&gt; &lt;a href="javascript:void(0)...

    easyui培训文档

    &lt;th field="price" width="100" align="right"&gt;Price&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;/table&gt; ``` 此示例展示了如何使用 Datagrid 结合 Pagination。 ##### 参数 Pagination 的参数包括: 1. **total**: 总记录数。 2....

    ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!

    str += "&lt;tr&gt;&lt;td&gt;" + lie[1] + "&lt;/td&gt;&lt;td&gt;" + lie[2] + "&lt;/td&gt;&lt;td&gt;" + lie[3] + "&lt;/td&gt;&lt;td&gt; &lt;button type='button' ids='" + lie[0] + "' class='btn btn-primary sc'&gt;删除&lt;/button&gt;&lt;button type='button' ids='" +...

    网络软件开发-JavaBean的应用

    &lt;table class="tb"&gt; &lt;tr&gt; &lt;td&gt;名称&lt;/td&gt; &lt;td&gt;价格(元/斤)&lt;/td&gt; &lt;td&gt;购买&lt;/td&gt; &lt;/tr&gt; ... &lt;/table&gt; 思考题:如何在两个 JSP 页面之间传递中文数据,不出现乱码。 在本实验中,我们学习了如何使用 JavaBean 在...

    jquery培训文档

    &lt;table cellpadding="5"&gt; &lt;tr&gt; &lt;td&gt;Name:&lt;/td&gt; &lt;td&gt;&lt;input class="easyui-textbox" required="true" name="name"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/form&gt; &lt;/div&gt; ``` ##### 参数 - **width**:对话框的宽度。 - **...

Global site tag (gtag.js) - Google Analytics