HTML中表格的使用

2025-04-21 01:44:06

1、打开PyCharm开发工具，新建‘td.html文件’，写代码如下;<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Title</title></head><body> <table> <tr> <td> hello </td> <td> world </td> </tr> </table></body></html>表格标签是table，tr是行，td是单元格

2、点击左上角的浏览器图标查看效果如下图

3、表格虽然可以显示，但是没有边框很难看，增加几行并设置边框和背景颜色如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <table border="1" bgcolor="red"> <tr> <td> hello </td> <td> world </td> </tr> <tr> <td> hi </td> <td> lily </td> </tr> <tr> <td> hehe </td> <td> hehe </td> </tr> </table></body></html>

4、浏览器中查看效果如下图

5、跨行和跨列也是表格常用的属性，写个代码演示一下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <table border="1" bgcolor="red"> <tr> <td colspan="2"> hello </td> </tr> <tr> <td > world </td> <td rowspan="2" > hi </td> </tr> <tr> <td> hehe </td> </tr> </table></body></html>

6、浏览器中查看跨行跨列效果如下图

7、添加表头thead，代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <table border="1" bgcolor="red"> <thead> 我是表头 </thead> <tr> <td colspan="2"> hello </td> </tr> <tr> <td > world </td> <td rowspan="2" > hi </td> </tr> <tr> <td> hehe </td> </tr> </table></body></html>

8、浏览器中查看表头效果如下图

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。