HTML入门-------table布局

最新推荐文章于 2024-09-27 16:28:09 发布

春.生

最新推荐文章于 2024-09-27 16:28:09 发布

阅读量3.7k

点赞数

文章标签： html

本文链接：https://blog.csdn.net/funny54/article/details/117221634

版权

本文详细介绍了HTML中表格的使用，包括如何通过<table>、<tr>、<th>、<td>标签创建表格，以及表头、表体、表尾的划分。还探讨了表格的常用属性如border、cellpadding、cellspacing、height、width、align等，并展示了如何设置背景颜色和图片。此外，讲解了表格的嵌套方法以及如何通过colspan和rowspan实现单元格的合并。

摘要由CSDN通过智能技术生成

一.table表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格是以行和列的形势显示信息，常用于显示网格结构的数据。

二.创建表格

表格通过表格标签<table>、行标签<tr>、表头标签<th>、表格数据标签<td>这四种标签创建。表格也可以分成三个部分，表头(thead)、表体(tbody)、表尾(tfoot)。

<table border="1" align="center">
 <thead>
   <tr>
     <th>表头</th>
     <th>表头</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <td>表体</td>
     <td>表体</td>
   </tr>
 </tbody>
 <tfoot>
   <tr>
     <td>表尾</td>
     <td>表尾</td>
   </tr>
 </tfoot>
</table>

三.表格常用属性

表格的常用属性有边框(border)、边距(cellpadding)、间距(cellspacing)、高(height)、宽(width)、对齐方式(align)、背景颜色(bgcolor)、背景图片(background)等。

border：设置表格边框。默认值为0，浏览器不显示表格边框。border属性的值表示边框的宽度，单位为像素，border属性设置只影响表格四周的边框宽度，而不影响单元格之间的边框尺寸。

设置表格的边框宽度为6像素。

<table border="6"></table>

cellpadding：设置表格的边距，表示单元格内容与其边框之间的空白。

设置表格的边距为5像素。

<table cellpadding="5"> </table>

cellspacing：设置表格的间距，它可以增加单元格之间的距离。

设置表格的间距为5像素。

<table cellspacing="5"> </table>

height和width：分别设置表格的高和宽。

<table height="500" width="500">  </table>

align：单元格里的文字对齐方式，该属性的取值有左对齐(left)、右对齐(right)、居中对齐(center).

bgcolor和background：分别设置表格的背景颜色和背景图片。

四.表格嵌套

表格嵌套就是在一个表格里包含另一个表格。

<table width="200" border="1" align="center">
  <tr>
   <td>&nbsp;</td>
   <td>
     <table width="100" border="1" align="center">
       <tr>
         <td>&nbsp;</td>
       </tr>
     </table>
   </td>
  </tr>
</table>

五.表格合并

表格合并可以把多个单元格合并成一个单元格，用到的属性有跨列合并(colspan)和跨行合并(rowspan)。

<table width="200" border="1" align="center">
  <tr>
   <td colspan="2">&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td rowspan="2">&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
</table>