表格的基本标签

HTML表格由table标签以及一个或多个tr、th或td标签组成:

  • table标签:定义一个表格
  • caption标签:定义表格标题,嵌套在<table></table>
  • tr标签:定义表格中的一行,嵌套在<table></table>
  • th标签:定义表格中的表头单元格,嵌套在<tr></tr>
  • td标签:定义表格中的数据单元格,嵌套在<tr></tr>

表格标签的基本属性

table标签的基本属性

table标签的基本属性如下图所示:

table的属性

tr标签的基本属性

tr标签的基本属性如下图所示:

tr标签属性

th和td标签的基本属性

 th和td标签的基本属性如下图所示:

th和td标签属性

示例如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. </head>
  6. <body>
  7. <table border="5px" bgcolor="00ffff" width="300">
  8. <caption>通讯录</caption>
  9. <tr>
  10. <td width=100>姓名</td>
  11. <td width=100>QQ</td>
  12. <td width=100>电话</td>
  13. </tr>
  14. <tr>
  15. <td>张三</td>
  16. <td>123456</td>
  17. <td>13511112222</td>
  18. </tr>
  19. <tr>
  20. <td>李四</td>
  21. <td>654321</td>
  22. <td>13611112222</td>
  23. </tr>
  24. </table>
  25. </body>
  26. </html>

实现的效果如下图所示:

表格效果

tr标签

tr标签用于定义表格的一个行。可由以下属性设置一行单元格的样式:

height

tr标签中的height属性设置行高,属性取值为具体行高的数值。

align

tr标签中的align属性设置行内单元格中文本的水平对齐方式,属性取值可以为left、center、right。

valign

tr标签中的valign属性设置行内单元格中文本的垂直对齐方式,属性取值可以为top、middle、bottom。

bgcolor

tr标签中的bgcolor属性设置行内单元格的背景颜色,属性取值可以为颜色单词或颜色代码。

background

tr标签中的background属性设置行背景图像,属性取值为背景图像的路径。

 

单元格整体样式

单元格的整体样式主要涉及单元格之间的距离和单元格中内容的内边距。可以在table标签内通过cellspacing和cellpadding属性来来设置。

cellspacing

cellspacing属性用于设置单元格之间的间隙,取值为某一数值。

cellpadding

cellpadding属性用于设置单元格中的文本与单元格边框之间的间隙,也称为内边距,取值为某一数值。

 

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐