尝试复制表格图像

13设计

我正在尝试使用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>

然后从那里展开。对于如何为此打下坚实基础的任何帮助，以及如何使用各种背景颜色为这些不同的单词上色的帮助都将非常有用。

费尔南多·莫利纳

我做了这个，它非常相似:)

.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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。