html - 在 html 中创建一个子列

Question

我是一名学习者，正在尝试制作这张 table 。 http://imgur.com/eWAv4IS 好吧，我不知道如何在表格的列中添加该图像列。 无法在任何地方找到解决方案。 谁能为此提供解决方案。我真的很感激。

Answer 1

您正在寻找图像的 rowspan 表格属性以垂直穿过表格行。

您还需要使用 colspan 使图像下方的表格单元格继续水平移动到表格末尾。

谷歌它以获取有关如何使用它的更多信息......

table {table-layout:fixed;}

<table width="100%" border="1" cellspacing="0" cellpadding="0">
	<tr>
		<td>Today's your lucky day. Look around, kiddo - it's all yours.</td>
		<td>Today's your lucky day. Look around, kiddo - it's all yours.</td>
		<td rowspan="5"><img src="http://lorempixel.com/output/nature-q-c-200-200-8.jpg"></td>
	</tr>
	<tr>
		<td>Today's your lucky day. Look around, kiddo - it's all yours.</td>
		<td>Today's your lucky day. Look around, kiddo - it's all yours.</td>
	</tr>
	<tr>
		<td>Today's your lucky day. Look around, kiddo - it's all yours.</td>
		<td>Today's your lucky day. Look around, kiddo - it's all yours.</td>
	</tr>
	<tr>
		<td>Today's your lucky day. Look around, kiddo - it's all yours.</td>
		<td>Today's your lucky day. Look around, kiddo - it's all yours.</td>
	</tr>
	<tr>
		<td>Today's your lucky day. Look around, kiddo - it's all yours.</td>
		<td>Today's your lucky day. Look around, kiddo - it's all yours.</td>
	</tr>
	<tr>
		<td>Today's your lucky day. Look around, kiddo - it's all yours.</td>
		<td colspan="2">Today's your lucky day. Look around, kiddo - it's all yours.</td>
	</tr>
	<tr>
		<td>Today's your lucky day. Look around, kiddo - it's all yours.</td>
		<td colspan="2">Today's your lucky day. Look around, kiddo - it's all yours.</td>
	</tr>
</table>