HTML/CSS Table style

Question

I'm having trouble with my table. It isn't appearing how I'd like it to and I was wondering if anyone could help me fix any mistakes I might have made. Thank you so much!

Here is a picture of the table on the site

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>

gavgrif · Accepted Answer · 2017-03-19 01:53:32Z

You have a colspan ="2" on the table thead th but not on the th's within the tr's. Adding the colspan to the tr th's aligns the columns - however I am not sure its the best approach to have the th as the first td of the row. It would be better to apply styling to the td to give it the same style as the column heading but without the semantic definition of a th within the row.

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>

Collectives™ on Stack Overflow

HTML/CSS Table style

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related