ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

网页|HTML表格制作

2021-06-30 14:57:35  阅读:213  来源: 互联网

标签:网页 HTML 表格 单元格 表头 html 跨行 定义


问题描述

用html表格制作如何能够做出一个类似Excel的表格呢?

在我们学习工作想要做出一个表格的时候,我们通常会直接打开Excel,但其实,使用html进行表格制作时,更能体会到敲代码的魅力。

解决方案

表格由 <table> 标签来定义,表格的标题由<caption>定义。

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

图3.1

表格的行由<tr> </tr>定义,列(单元格)由<td> </td>定义,要输入的数据内容由<td> </td>定义,表头由<th> </th>定义

 watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

图3.2行、列、表头示例

跨行(列)的表格单元格

跨行单元格用 rowspan= “ ” 定义,跨列单元格用 colspan= “ ” 定义。

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

图3.3跨行单元格

结语

在使用html表格制作的过程中,体会到了自己敲代码做表格的魅力,但同时过程也遇到了一些问题。比如,当你要在如图表格的体育部后面添加干事一列,此时并不能把这个表格分成左右两部分看,而是把它们当作一个整体在第二列后面添加一个<td>标签,输入干事数据。

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

图4.1表格示例

END

实习编辑   |   王楠岚

责       编   |   吴怡辰

 where2go 团队


   

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

标签:网页,HTML,表格,单元格,表头,html,跨行,定义
来源: https://blog.51cto.com/u_15281984/2958441

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有