文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何使用html5实现表格实现标题合并

2023-06-09 12:49

关注

这篇文章给大家分享的是有关如何使用html5实现表格实现标题合并的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

使用html5实现表格实现标题合并的实例代码

这样的需求不在少数,比如表格中相邻的列具有相同的内容,那么标题就完全可以使用一个,那么合并标题就是十分重要的,让用户感觉也会更加人性化,代码实例如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>web前端学习扣qun:731771211  每日分享技术,学术交流</title><style type="text/css">body{  width:98%;  height:100%;  font-size:12px;  background-color:#FCF;  text-align:center;}#tab{  width:100%;  height:100%;  font-size:12px;  font-family:Verdana, Geneva, sans-serif Georgia, "Times New Roman", Times, serif;  font-weight:bolder;  background-color:#9F0;}</style></head><body><table id="tab" cellpadding="1" cellspacing="1" border="1">  <tr>    <th rowspan="2">序号</th>    <th colspan="2">王五</th>    <th colspan="2">李四</th>    <th colspan="2">孙传</th>    <th colspan="2">胡平</th>    <th rowspan="2">合计</th>  </tr>  <tr>    <th>语文</th>    <th>数学</th>    <th>语文</th>    <th>数学</th>    <th>语文</th>    <th>数学</th>    <th>语文</th>    <th>数学</th>  </tr>  <tr>    <th>1</th>    <th>78</th>    <th>96</th>    <th>67</th>    <th>98</th>    <th>88</th>    <th>75</th>    <th>94</th>    <th>69</th>    <th> </th>  </tr>  <tr>    <th>2</th>    <th>89</th>    <th>68</th>    <th>77</th>    <th>87</th>    <th>84</th>    <th>76</th>    <th>71</th>    <th>87</th>    <th> </th>  </tr>  <tr>    <th>3</th>    <th>75</th>    <th>78</th>    <th>89</th>    <th>74</th>    <th>65</th>    <th>68</th>    <th>98</th>    <th>90</th>    <th></th>  </tr>  <tr>    <th>4</th>    <th>79</th>    <th>89</th>    <th>65</th>    <th>62</th>    <th>64</th>    <th>87</th>    <th>97</th>    <th>91</th>    <th></th>  </tr>  <tr>    <th>5</th>    <th>89</th>    <th>96</th>    <th>67</th>    <th>76</th>    <th>74</th>    <th>84</th>    <th>67</th>    <th>81</th>    <th></th>  </tr>  <tr>    <th>6</th>    <th>94</th>    <th>90</th>    <th>97</th>    <th>74</th>    <th>62</th>    <th>81</th>    <th>78</th>    <th>78</th>    <th></th>  </tr>  <tr>    <th>7</th>    <th>78</th>    <th>89</th>    <th>77</th>    <th>87</th>    <th>45</th>    <th>86</th>    <th>77</th>    <th>98</th>    <th></th>  </tr>  <tr>    <th>8</th>    <th>65</th>    <th>67</th>    <th>94</th>    <th>68</th>    <th>87</th>    <th>69</th>    <th>78</th>    <th>68</th>    <th></th>  </tr>  <tr>    <th>9</th>    <th>86</th>    <th>98</th>    <th>87</th>    <th>87</th>    <th>65</th>    <th>78</th>    <th>98</th>    <th>79</th>    <th></th>  </tr>  <tr>    <th>10</th>    <th>88</th>    <th>75</th>    <th>77</th>    <th>97</th>    <th>97</th>    <th>77</th>    <th>70</th>    <th>87</th>    <th></th>  </tr></table></body></html>

感谢各位的阅读!关于“如何使用html5实现表格实现标题合并”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯