如何制作以下HTML

时间:2017-09-11 10:51:18

标签: html css html5

我附上了截图。我想为此制作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>
&#13;
&#13;
&#13;

我希望表格包含以下enter image description here

之类的列

2 个答案:

答案 0 :(得分:2)

您可以将rowspan和colspan用于标题行。休息是简单的tr和td。

&#13;
&#13;
<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> 
&#13;
&#13;
&#13;

答案 1 :(得分: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>