首页 > 编程 > HTML > 正文

HTML中table表格标签的基础学习教程

2019-10-26 17:18:59
字体:
来源:转载
供稿:网友

表格的标签组成
HTML中的表格是由<table>为主体标签,浏览器会将该标签解释为一个表格。表格中的行使用<tr>标签进行定义。<tr>标签为<table>标签的子类,设置若干个<tr>标签可以将表格分割为若干个行。<td>标签用于定义表格的列,<td>标签为又是<tr>标签的子类,因此每个行都需要设置相应数量的<td>标签来分割列,形成一个完整的表格。
表格的标签组合关系为:

  • <table>   <tr>  
  • <td>我是单元格1</td>   <td>我是单元格2</td>  
  • </tr>   </table>  
  • 表格中可以插入文本、图片、列表、段落、表单、水平线等任何html标签,甚至可以用来做页面布局。但是table布局存在代码冗余过长、不符合HTML规范、搜索引擎不友好等问题。因此建议大家尽量不要使用table进行页面布局,除非页面中确实需要一张表格。
    剩下的<th>、<thead>、<tbody> 和 <tfoot>很少被用到,这是由于浏览器对它们的支持不太好。
     
    表格和边框属性
    表格自身可以定义border属性来决定表格边框的宽度,该属性的值默认是以数字单位进行显示,例如border=”1″该值的单位为px。注意,不要在border的数值后面加上任何单位,否该值无法正确识别。
     
    表格的表头
    在<table>中可以通过<th>标签设置表头,表头的<th>标签与<tr>标签属于平级,并且表头一般出现在<tr>标签的前面。对于一个表格来说,表头并不是必须的,可以根据需要插入表头。<th>标签内的文字会被自动加粗。
     
    单元格的合并
    单元格的合并分为垂直合并与水平合并,在合并时需要确定其他行与列中是否有对应数量的单元格。
    水平合并单元格使用colspan属性,其值是用数字的形式确定需要合并的单元格数量,例如colspan=”2″即代表向右合并两个单元格。
    垂直合并单元格使用rowspan属性,与水平合并的属性相同,同样也是以数字形式确定需要合并的单元格数量,例如rowspan=”2″代表向下合并两个单元格。
    实例演示代码:

  • <table border=“1”>   <tr>  
  • <th>姓名</th>   <th colspan=“2”>电话</th>  
  • </tr>   <tr>  
  • <td>Bill Gates</td>   <td>555 77 854</td>  
  • <td>555 77 855</td>   </tr>  
  • </table><h4>横跨两行的单元格:</h4>   <table border=“1”>  
  • <tr>   <th>姓名</th>  
  • <td>Bill Gates</td>   </tr>  
  • <tr>   <th rowspan=“2”>电话</th>  
  • <td>555 77 854</td>   </tr>  
  • <tr>   <td>555 77 855</td>  
  • </tr>   </table>  
  • 发表评论 共有条评论
    用户名: 密码:
    验证码: 匿名发表