html - 试图复制表格图像

Question

我正在尝试使用 HTML 复制表格图像，但不知道如何开始。

我觉得我应该从类似的东西开始

<table>
  <caption>Table Example</caption>
  <tr>
    <th>Table cell(th)</th>
    <th>In bold</th>
    <th>centered</th>
  </tr>
  <tr>
    <td>Table cell(td)</td>
    <td>Text - Row 2 - cell 2 (td)</td>
    <td>Text - Row 2 - cell 3 (td)</td>
  </tr>
  <tr>
    <td>Text - Row 3 - cell 1</td>
    <td>Text - Row 3 - cell 2</td>
    <td>Text - Row 3 - cell 3</td>
  </tr>
</table>

然后从那里展开。任何关于如何为此打下坚实基础的帮助都会很棒，以及如何使用各种背景颜色为这些不同的单词着色。

Answer 1

这是我做的，非常相似:)

.tg  {
	border-spacing: 15px;
}
.tg td {
	font-family:Arial, sans-serif;
	font-size:14px;
	padding: 10px 15px;
	border-style:solid;
	border-width:1px;
	overflow:hidden;
	word-break:normal;
	background: #32CC98;
}
.tg th {
	font-family:Arial, sans-serif;
	font-size:14px;
	font-weight:normal;
	padding:10px 5px;
	border-style:solid;
	border-width:1px;
	overflow:hidden;
	word-break:normal;
	background: #32CC98;
}
.tg .tedelarge {
	text-align:center;
	vertical-align:middle
}
.tg .tede {
	vertical-align: middle;
}

<table class="tg">
	<tr>
		<th class="tede">The</th>
		<th class="tede">Little</th>
		<th class="tede">Piggy</th>
		<th class="tede">Went</th>
		<th class="tede">To</th>
		<th class="tede">Market</th>
	</tr>
	<tr>
		<td class="tede" colspan="2">This</td>
		<td class="tede">Little</td>
		<td class="tede">Piggy</td>
		<td class="tede">Went</td>
		<td class="tede">To</td>
	</tr>
	<tr>
		<td class="tede" colspan="4">This</td>
		<td class="tedelarge" rowspan="3">Little</td>
		<td class="tede">Piggy</td>
	</tr>
	<tr>
		<td class="tede" rowspan="2">This</td>
		<td class="tede">Little</td>
		<td class="tede">Piggy</td>
		<td class="tede">Went</td>
		<td class="tede">To</td>
	</tr>
	<tr>
		<td class="tede">Little</td>
		<td class="tede">Piggy</td>
		<td class="tede">Went</td>
		<td class="tede">To</td>
	</tr>
</table>