web前端开发与应用——表格

表格的基本标签

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属性用于设置单元格中的文本与单元格边框之间的间隙,也称为内边距,取值为某一数值。

 

 

  • 0
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值