HTML / CSS表格样式

Question

我的桌子遇到了麻烦。它似乎没有出现我喜欢它，我想知道是否有人可以帮助我解决我可能犯的任何错误。非常感谢你！

以下是网站上表格的图片

table.foodTable{
	border:4px outset black;
	border-collapse:collapse;
	width: 100%;
	background-color:white;
	text-align:center;
	
}

table.foodTable caption{
	font-weight:bold;
}


table.foodTable thead{
	height:2.5em;
	font-size:1.1em;
}

table.foodTable thead tr th{
	padding: 0.5em 1.5em;
}

table.foodTable tbody tr td{
    border: 4px solid black;
    padding: 0.5em 1.5em;
}

<table class = "foodTable">
	<caption>Food</caption>
	<thead>
	<tr>
		<th colspan = "2" style = "border-top:none;border-left:none;">&nbsp;</th>
		<th>Hate</th>
		<th>Dislike</th>
		<th>Indifferent</th>
		<th>Like</th>
		<th>Love</th>
	</tr>
	</thead>
	
	<tbody>
		<tr>
			<th>Chocolate</th>
			<td> - </td>
			<td> - </td>
			<td> - </td>
			<td> - </td>
			<td>&#10004</td>
		</tr>
		<tr>
			<th>Ketchup</th>
			<td> &#10004</td>
			<td> - </td>
			<td> - </td>
			<td> - </td>
			<td> - </td>
			</tr>
			
		<tr>
			<th>Cheese</th>
			<td> - </td>
			<td> &#10004 </td>
			<td> - </td>
			<td> - </td>
			<td> - </td>
		</tr>
	</tbody>
</table>

Answer 1

桌子上有colspan ="2" thead th，而不是{tr}内的th。将colspan添加到tr th对齐列 - 但是我不确定将th作为行的第一个td的最佳方法。最好将样式应用于td，使其具有与列标题相同的样式，但行内没有th的语义定义。

table.foodTable{
	border:4px outset black;
	border-collapse:collapse;
	width: 100%;
	background-color:white;
	text-align:center;
	
}

table.foodTable caption{
	font-weight:bold;
}


table.foodTable thead{
	height:2.5em;
	font-size:1.1em;
}

table.foodTable thead tr th{
	padding: 0.5em 1.5em;
}

table.foodTable tbody tr td{
    border: 4px solid black;
    padding: 0.5em 1.5em;
}

<table class = "foodTable">
	<caption>Food</caption>
	<thead>
	<tr>
		<th colspan = "2" style = "border-top:none;border-left:none;">&nbsp;</th>
		<th>Hate</th>
		<th>Dislike</th>
		<th>Indifferent</th>
		<th>Like</th>
		<th>Love</th>
	</tr>
	</thead>
	
	<tbody>
		<tr>
			<th colspan = "2">Chocolate</th>
			<td> - </td>
			<td> - </td>
			<td> - </td>
			<td> - </td>
			<td>&#10004</td>
		</tr>
		<tr>
			<th colspan = "2">Ketchup</th>
			<td> &#10004</td>
			<td> - </td>
			<td> - </td>
			<td> - </td>
			<td> - </td>
			</tr>
			
		<tr>
			<th colspan = "2">Cheese</th>
			<td> - </td>
			<td> &#10004 </td>
			<td> - </td>
			<td> - </td>
			<td> - </td>
		</tr>
	</tbody>
</table>