浅谈表格标签<table> </table>

表格是网页中常见的元素,其形式丰富多样,具有很好的数据展示的功能。因此,想要在网页中清晰、美观的展示数据,熟练的掌握表格标签是必不可少的。

表格标签主要有以下三种基本格式:

1.无表头形式:

<table>
      <tr>
         <td> </td> ......<td> </td>
       </tr>
       .......
      <tr>
         <td> </td> ......<td> </td>
       </tr>
    </table>

此格式是最为基础的表格,每一行都是一样的格式

2.有表头形式:

 <table>
 	<th>
 	<td> </td> ......<td> </td>
 	</th>
      <tr>
         <td> </td> ......<td> </td>
       </tr>
       .......
      <tr>
         <td> </td> ......<td> </td>
       </tr>
    </table>

此表格在1表格的基础上增加了<th></th>标签,th为表格头标签,被th包含的内容会被加粗显示

3.表格头部和身体区分的标签:

<table>
     <thead>
		<tr>
           <td> </td>.....<td> </td>
        </tr>
     </thead>
      
      <tbody>
      		<tr>
               <td> </td>.....<td> </td>
           </tr>
      </tbody>
  </table>

此形式的表格将表头和表的身体区分开来,具有清晰的结构,在实际开发中较为常用,其中<thead><th>可看作包含关系。

但在实际使用中,我们需要的表格常常不是行列分明的,这时候就需要根据实际的需求对表格的单元格进行合并。合并单元格有两种方式,一种是跨行合并,一种是跨列合并。下面就来讲讲如何合并单元格。

跨行合并:
1.跨行合并以合并行的最上面一行为操作对象
2.如合并两行则操作如下,:

<td rowspan="2">

3.将多余的单元格删除

跨列合并:
1.跨列合并则以最左侧的单元格为基准进行操作
2.合并两列单元格操作如下:

  <td colspan="2">

3.删除多余的单元格

在表格标签中还有许多属性,但实际开发中常常用CSS来设置,此处便不一样介绍了。

猜你喜欢

转载自blog.csdn.net/m0_52021758/article/details/112967378