您现在的位置是：网站首页> 编程资料编程资料

HTML中table表格标签的基础学习教程详解HTML中table表格的frame和rules属性html css 控制div或者table等固定在指定位置的实现方法使用HTML5中的contentEditable来将多行文本自动增高深入解析HTML的table表格标签与相关的换行问题html中Div与table的区别(各方面细节探讨)html固定标题列、标题头table具体实现代码html的table用法(让网页的视觉效果显示出来)HTML table 直列化格式详解

2021-08-30 1495人已围观

简介 用table标签在Web上显示表格内容是HTML所具有的最基本功能之一,这里我们就来看一下HTML中table表格标签的基础学习教程,需要的朋友可以参考下

表格的标签组成
HTML中的表格是由

为主体标签，浏览器会将该标签解释为一个表格。表格中的行使用标签进行定义。标签为
标签的子类，设置若干个标签可以将表格分割为若干个行。标签的子类，因此每个行都需要设置相应数量的、 和 很少被用到，这是由于浏览器对它们的支持不太好。
 
表格和边框属性
表格自身可以定义border属性来决定表格边框的宽度，该属性的值默认是以数字单位进行显示，例如border=”1″该值的单位为px。注意，不要在border的数值后面加上任何单位，否该值无法正确识别。
 
表格的表头
在
标签用于定义表格的列，标签为又是
标签来分割列，形成一个完整的表格。
表格的标签组合关系为：

XML/HTML Code复制内容到剪贴板
  1. <table>  
  2. <tr>  
  3. <td>我是单元格1td>  
  4. <td>我是单元格2td>  
  5. tr>  
  6. table>  

表格中可以插入文本、图片、列表、段落、表单、水平线等任何html标签，甚至可以用来做页面布局。但是table布局存在代码冗余过长、不符合HTML规范、搜索引擎不友好等问题。因此建议大家尽量不要使用table进行页面布局，除非页面中确实需要一张表格。
剩下的

、
中可以通过标签属于平级，并且表头一般出现在标签的前面。对于一个表格来说，表头并不是必须的，可以根据需要插入表头。
标签设置表头，表头的标签与
标签内的文字会被自动加粗。
 
单元格的合并
单元格的合并分为垂直合并与水平合并，在合并时需要确定其他行与列中是否有对应数量的单元格。
水平合并单元格使用colspan属性，其值是用数字的形式确定需要合并的单元格数量，例如colspan=”2″即代表向右合并两个单元格。
垂直合并单元格使用rowspan属性，与水平合并的属性相同，同样也是以数字形式确定需要合并的单元格数量，例如rowspan=”2″代表向下合并两个单元格。
实例演示代码：

XML/HTML Code复制内容到剪贴板
  1. <table border=“1”>  
  2. <tr>  
  3. <th>姓名th>  
  4. <th colspan=“2”>电话th>  
  5. tr>  
  6. <tr>  
  7. <td>Bill Gatestd>  
  8. <td>555 77 854td>  
  9. <td>555 77 855td>  
  10. tr>  
  11. table><h4>横跨两行的单元格：h4>  
  12. <table border=“1”>  
  13. <tr>  
  14. <th>姓名th>  
  15. <td>Bill Gatestd>  
  16. tr>  
  17. <tr>  
  18. <th rowspan=“2”>电话th>  
  19. <td>555 77 854td>  
  20. tr>  
  21. <tr>  
  22. <td>555 77 855td>  
  23. tr>  
  24. table>  

实例演示效果：

201678114240717.png (351×173)

单元格边距
表格具有与padding样式类似的内边距功能。通过在

标签内定义cellpadding属性，来为其标签下的所有标签内边距为10px
 
单元格间距
单元格的间距是设置标签的外边距，这个也与css样式中的margin类似，通过在
元素设置内边距。cellpadding属性的参数是值是以数字的形式来确定边距的大小，例如cellpadding=”10″ 则表示table中的所有
标签内定义cellspacing属性，来为其标签下的所有td元素设置外边距。该属性也是以数字的形式来确定外边距的大小，例如cellspacing=”10″则表示这个table中的所有标签的外边距为10px
 
为表格设置背景
表格可以通过background属性为表格或单元格设置任意图片作为背景，其使用方法非常像css中的background。为background设置对应的图片路径，即可使单元格显示相应的图片。例如background=”table_bg.gif”
 
表格内容的对齐排列
表格的对齐分为水平对齐和垂直对齐。它们分别是align属性与valign属性，将这两个属性插入到对应的
标签中即可完成单元格内文本或图像的对齐。
水平对齐align分别有三个值：left左对齐、center水平居中、right右对齐
垂直对齐valing也有三个值：top顶端对齐、middle垂直居中、bottom底部对齐、baseline为基线对齐。
其中基线对齐可能无法从字面上理解，其实基线对齐也就是文本出现在表格的中上部而不是正中央。如果文字不大的话，效果和middle差不多，比middle稍微靠上一点。

PS：CSS中的table-layout语句
这个语句可以用来指定表格显示的样式，比如

CSS Code复制内容到剪贴板
  1. table { table-layout: fixed }  

它可以取三个值：
* auto（缺省）
* fixed
* inherit
auto表示单元格的大小由内容决定。fixed表示单元格的大小是固定的，由第一个指定大小的单元格决定；如果所有单元格都没有指定大小，则由第一个单元格的默认大小决定；如果单元格中的内容超出单元格的大小，则用CSS中的overflow命令控制。微软公司声称使用这个命令，表格的显示速度可以加快100倍。
顺便说一句，为了加快表格显示，最好事先就在CSS（或者table标签的width和height属性）中指定表格的宽度和高度。

上一篇：html制作细线表格的简单实例html5绘制的用户数据表格与饼状图形效果源码HTML表格布局实例讲解有关HTML表格边框的设置小技巧Div+CSS对HTML的table表格定位用法实例深入解析HTML的table表格标签与相关的换行问题

下一篇：HTML中的超链接标签使用教程HTML基础知识——设置超链接的样式简单实例XHTML中的超链接标签使用教程html 用超链接打开新窗口其可控制窗口属性html超链接a标签的href跳转跟onclick之间执行顺序示例介绍解决html 图片img加超链接后产生难看的蓝色边框问题html超链接样式(四种不同状态)设置示例html 中文乱码 HTML超链接中文乱码问题分析及解决方法HTML利用超链接打开链接文件的方法介绍HTML设置超链接字体颜色和点击后的字体颜色网页制作初学者:学用HTML的超链接A标记

相关内容

点击排行

本栏推荐

猜你喜欢