HTML(8)表格
表格由<table></table>标签定义,在内部通过<tr>创建行(table row),<tr>内部通过<td>(table data,表格数据) 创建单元格。可以将table的border属性设为0来隐藏表格线。
1.<td>单元格属性:
填充(cellpadding):内容和表格边线之间的距离 。
间距(cellspacing):单元格之间的间距。
rowspan(合并行)、colspan(和并列)进行单元格的合并<td rowspan ="2" colspan = "2">。
2.<tr>的属性:
align,水平对齐,可选值left、right、center;valign,垂直对齐,可选值top、middle、bottom。
<td>也有align和valign,子标签默认继承父标签的属性,如果自己单独指定了属性,则会覆盖父标签的属性。
<tr align="right"><td>tom</td><td align="left">20</td><td>男</td></tr>
表头的td可以用th代替,这样就会表头粗体、居中显示。
一般在写表格的时候都先把border=“1”写上,当表格都调试的没有问题的时候然后在去掉border=“1” 。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title>表格</title> 5 <meta http-equiv="content-type" content="text/html; charset=gb2312;" /> 6 </head> 7 <body> 8 <!--1.基本表格--> 9 <table border="1"> 10 <tr> 11 <td> 12 土豆 13 </td> 14 <td> 15 白菜 16 </td> 17 </tr> 18 <tr> 19 <td> 20 西红柿 21 </td> 22 <td> 23 鸡蛋 24 </td> 25 </tr> 26 </table> 27 <!--较为完整的表格:(带有caption/thead/th/tbody/tfoot标签的表格)--> 28 <table border="1" cellspacing="0" cellpadding="0" width="300"> 29 <caption> 30 课程表</caption> 31 <thead> 32 <tr> 33 <th> 34 周一 35 </th> 36 <th> 37 周二 38 </th> 39 <th> 40 周三 41 </th> 42 </tr> 43 </thead> 44 <tbody> 45 <tr> 46 <td> 47 html 48 </td> 49 <td> 50 net 51 </td> 52 <td> 53 javascript 54 </td> 55 </tr> 56 </tbody> 57 <tbody style="display: none"> 58 <tr> 59 <td> 60 html加强 61 </td> 62 <td> 63 net高级技术 64 </td> 65 <td> 66 javascript Dom 67 </td> 68 </tr> 69 </tbody> 70 <tfoot> 71 <tr> 72 <th colspan="3"> 73 晚自习 74 </th> 75 </tr> 76 </tfoot> 77 </table> 78 </body> 79 </html>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· [AI/GPT/综述] AI Agent的设计模式综述