tables or css? (for tabular data, no specific help needed, just feedback) :)

[ultrus]

Hello,

I have a chart on my website that looks like the attached image. While I convert many elements on the website from all tables to mostly css design, I'm wondering if I should leave these charts as tables, or convert them to css. If I did convert them, would there be any savings in script size?

 

Here is the table version:

 

<style type="text/css">
th.dataRowTopW {
font-weight: bold;
color: #003366;
padding: 6px;
border-top: #003366 solid 1px;
border-bottom: #95917A solid 1px;
background-color: #FFFFFF;
}

td.dataRowTopW {
padding: 6px;
border-top: #003366 solid 1px;
border-bottom: #95917A solid 1px;
border-left: #95917A solid 1px;
background-color: #FFFFFF;
}

th.dataRowMidW {
font-weight: bold;
color: #003366;
padding: 6px;
border-bottom: #95917A solid 1px;
background-color: #FFFFFF;
}

td.dataRowMidW {
padding: 6px;
border-bottom: #95917A solid 1px;
border-left: #95917A solid 1px;
background-color: #FFFFFF;
}

th.dataRowLastW {
font-weight: bold;
color: #003366;
padding: 6px;
border-bottom: #003366 solid 1px;
background-color: #FFFFFF;
}

td.dataRowLastW {
padding: 6px;
border-bottom: #003366 solid 1px;
border-left: #95917A solid 1px;
background-color: #FFFFFF;
}
</style>

<table>
<tr>
	<td class="secTitle2"><h2><img src="kitchensG.png" alt="Kitchens"></h2></td>
</tr>
<tr>
	<td class="secBody1">

		<table>
			<tr>
				<th class="dataRowTopW" style="width: 300px;">
					<h3>Number of Kitchens:</h3>
				</th>
				<td class="dataRowTopW">
					10
				</td>
			</tr>
			<tr>
				<th class="dataRowMidW" style="width: 300px;">
					<h3>Can accommodate catering/professional chef:</h3>
				</th>
				<td class="dataRowMidW">
					Yes
				</td>
			</tr>
			<tr>
				<th class="dataRowMidW" style="width: 300px;">
					<h3>Stone counter tops:</h3>
				</th>
				<td class="dataRowMidW">
					Yes
				</td>
			</tr>
			<tr>
				<th class="dataRowMidW" style="width: 300px;">
					<h3>Kitchenware/cooking utensils included:</h3>
				</th>
				<td class="dataRowMidW">
					Yes
				</td>
			</tr>
			<tr>
				<th class="dataRowLastW" style="width: 300px;">
					<h3>Kitchen Aplliances:</h3>
				</th>
				<td class="dataRowLastW">

					<table style="width: 95%;">
						<tr>
							<td style="width: 33%;">
								<img src="check.gif" style="margin-right: 6px;" alt="">Sink
							</td>
							<td style="width: 12px;"> </td>
							<td style="width: 33%;">
								<img src="check.gif" style="margin-right: 6px;" alt="">Refrigerator
							</td>
							<td style="width: 33%;">
								<img src="check.gif" style="margin-right: 6px;" alt="">Oven
							</td>
						</tr>
						<tr>
							<td style="height: 6px;" colspan="3"><img src="spacer.gif" alt="" height="6" width="6"></td>
						</tr>
						<tr>
							<td style="width: 33%;">
								<img src="check.gif" style="margin-right: 6px;" alt="">Range
							</td>
							<td style="width: 12px;"> </td>
							<td style="width: 33%;">
								<img src="check.gif" style="margin-right: 6px;" alt="">Microwave
							</td>
							<td style="width: 33%;">
								<img src="check.gif" style="margin-right: 6px;" alt="">Dishwasher
							</td>
						</tr>
						<tr>
							<td style="height: 6px;" colspan="3">
								<img src="spacer.gif" alt="" height="6" width="6">
							</td>
						</tr>
						<tr>
							<td style="width: 33%;">
								<img src="check.gif" style="margin-right: 6px;" alt="">Warming Drawer
							</td>
							<td style="width: 12px;"> </td><td style="width: 33%;">
								<img src="check.gif" style="margin-right: 6px;" alt="">Juicer
							</td>
							<td style="width: 33%;">
								<img src="check.gif" style="margin-right: 6px;" alt="">Blender
							</td>
						</tr>
						<tr>
							<td style="height: 6px;" colspan="3"><img src="spacer.gif" alt="" height="6" width="6"></td>
						</tr>
						<tr>
							<td style="width: 33%;">
								<img src="check.gif" style="margin-right: 6px;" alt="">Trash Compactor
							</td>
							<td style="width: 12px;"> </td><td style="width: 33%;">
								<img src="check.gif" style="margin-right: 6px;" alt="">Ice Maker</td>
							<td style="width: 33%;">
								<img src="check.gif" style="margin-right: 6px;" alt="">Toaster
							</td>
						</tr>
						<tr>
							<td style="height: 6px;" colspan="3"><img src="spacer.gif" alt="" height="6" width="6"></td>
						</tr>
						<tr>
							<td style="width: 33%;">
								<img src="check.gif" style="margin-right: 6px;" alt="check">Toaster Oven
							</td>
							<td style="width: 12px;"> </td>
							<td style="width: 33%;">
								<img src="check.gif" style="margin-right: 6px;" alt="check">Coffee Maker
							</td>
							<td style="width: 33%;">
								<img src="check.gif" style="margin-right: 6px;" alt="check">Coffee Grinder
							</td>
						</tr>
						<tr>
							<td style="height: 6px;" colspan="3"><img src="spacer.gif" alt="" height="6" width="6"></td>
						</tr>
						<tr>
							<td style="width: 33%;">
								<img src="check.gif" style="margin-right: 6px;" alt="check">Table Top Grill
							</td>
							<td style="width: 12px;"> </td>
							<td style="width: 33%;">
								<img src="check.gif" style="margin-right: 6px;" alt="check">Food Processor
							</td>
							<td style="width: 33%;"> </td>
						</tr>
					</table>

				</td>
			</tr>
		</table>

	</td>
</tr>
</table>

 

To me it seems like converting it to css would cause more issues in different browser, and not save a lot of script size. What are your thoughts on this? Any basic examples you would recommend?

 

Thanks for your feedback.

 

[attachment deleted by admin]

[rhodesa]

in this case, i would leave the TABLE. people tend to think "tableless layouts" means NO tables. it really just means tables for layouts. tables for tabular data is perfectly acceptable

[popcornplya]

Tables are fine, its what they were made for, data 

[TheFilmGod]

Your code is poorly designed.

 

You may use tables for the row/columns section, HOWEVER it is not semantic to use tables for the kitchen utensils with the checks. Use an unordered list and float the <li> w/ css.

 

And can you please explain to me why you have this in your code:

<h2><img src="kitchensG.png" alt="Kitchens"></h2>

.

 

Search engines can not read images! Encosing an image within <h2> tags is uesless. Although the alt="" tag gives some significance, why not do this:

 

<h2>Kitchens</h2>

 

And then make the contents in <h2> invisible and then set the background to "kitchensG.png"? That would help! 

[haku]

The Film God is correct (though maybe a little direct). The utensils should be a list, with all elements floated left, and an image replacement technique should be used in the H2 tag.

[ultrus]

Hey all,

Thanks for the great feedback! I appreciate it. I'm looking into your suggestions and may make changes to make my code better.