如何制作以下html

Posted

技术标签:

【中文标题】如何制作以下html【英文标题】:how make the following html 【发布时间】:2018-02-19 14:10:56 【问题描述】:

我附上截图。我想为此制作html。请帮忙 我的html

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

我想要具有如下列的表格

【问题讨论】:

你听说过一个叫colspanrowspan的东西吗? 添加一些你尝试过的css。而且你的标题根本不清楚。阅读***.com/help/how-to-ask 希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research,通过谷歌或搜索SO,尝试一下。如果您仍然遇到问题,请返回您的代码并解释您尝试过的操作。 【参考方案1】:

您可以根据需要使用 html 进行格式化,也可以使用一些 css 作为边框:

<style>
table, th, td 
border: 2px solid black;
border-collapse: collapse;

</style>
<table border="1">
  <tr>
   <td rowspan="2">A</td>
   <td colspan="2">B</td>
   <td colspan="2">C</td>
  </tr>
  <tr>
   <td>D</td>
   <td>E</td>
   <td>F</td>
   <td>G</td>
  </tr>
  <tr>
   <td>ROW1 - 1A</td>
   <td>ROW1 - 1B</td>
   <td>ROW1 - 1C</td>
   <td>ROW1 - 1D</td>
   <td>ROW1 - 1E</td>
  </tr>
  <tr>
   <td>ROW2 - 2A/td>
   <td>ROW2 - 2B</td>
   <td>ROW2 - 2C</td>
   <td>ROW2 - 2D</td>
   <td>ROW2 - 2E</td>
  </tr>
</table>

【讨论】:

欢迎@user7441072【参考方案2】:

您可以对标题行使用 rowspan 和 colspan。剩下的就是简单的tr和td。

<table border="1">
	  <tr>
	   <td rowspan="2">A</td>
	   <td colspan="2">B</td>
	   <td colspan="2">C</td>
	  </tr>
	  <tr>
	   <td>D</td>
	   <td>E</td>
	   <td>F</td>
	   <td>G</td>
	  </tr>
	  <tr>
	   <td>ROW1 - A</td>
	   <td>ROW1 - B</td>
	   <td>ROW1 - C</td>
	   <td>ROW1 - D</td>
	   <td>ROW1 - E</td>
	  </tr>
	  <tr>
	   <td>ROW2 - A</td>
	   <td>ROW2 - B</td>
	   <td>ROW2 - C</td>
	   <td>ROW2 - D</td>
	   <td>ROW2 - E</td>
	  </tr>
	</table> 

【讨论】:

以上是关于如何制作以下html的主要内容,如果未能解决你的问题,请参考以下文章

如何制作一个 Maven 项目的“胖罐子”? [复制]

如何在 HTML5(或 Fabric.js)中制作屋顶文字效果和山谷文字效果

如何使用 seaborn 制作以下条形图? [复制]

如何制作像 envato 这样的浮动侧边栏?

如何制作HTML邮件?

如何制作HTML页面