Basics on html Table with CSS elements not inline

HTML & CSS
1

Can you provide some basics on creating an html Table with the CSS design elements not inline, but in the CSS file?

2

It’s no different from styling anything else externally.

The HTML reference demonstrates how to properly construct tabular data: http://reference.sitepoint.com/html/elements-table

3

Thanks for that reply.
What I guess I should have asked is how do you name the table so the external CSS file can reference the html table?

4

You can either give it a special class—like any other element—

<table class="whatever">

or reference it from a container element—


<div class="main">
  <table>
  </table>
</div>


.main table { ... }
5

… and done properly you may not even need child classes…


<table class="yourClass">

	<caption>
		Describe table contents here, this is a header type element
	</caption>
	
	<colgroup>
		<col align="left" />
		<col align="center" />
		<col align="center" />
		<col align="center" />
	</colgroup>
	
	<thead>
		<tr>
			<th scope="col">Name</th>
			<th scope="col">Quantity</th>
			<th scope="col">Cost</th>
			<th scope="col">Total</th>
		</tr>
	</thead>
	
	<tbody>
		<tr>
			<th scope="row">Mouse</th>
			<td>1</td>
			<td>4.99</td>
			<td>4.99</td>
		</tr><tr>
			<th scope="row">Keyboard</th>
			<td>1</td>
			<td>6.99</td>
			<td>6.99</td>
		</tr><tr>
			<th scope="row">Monitor</th>
			<td>2</td>
			<td>199.99</td>
			<td>399.98</td>
		</tr>
	</tbody>
	
</table>

The header TH being isolated as “.yourClass tbody th”, the data row TH being isolated as “.yourClass tbody th”, the data row TD being “.yourclass tbody td”, etc, etc.

The colgroups I put in there for browsers that don’t recognize nth-child (legacy IE) or sibling selectors – as well as CSS off alignment. It’s one of the few situations presentation in the markup is acceptable. Firefox STILL doesn’t inherit that property, so you’d want to be sure to target TR nth-child and/or sibling selectors thus:


.yourClass tr th {
	text-align:left;
}

.yourClass tr td+td,
.yourClass tr th+th {
	text-align:center;
}

<aside>(Gecko’s failure to inherit ALIGN is ‘kind-of’ correct by the HTML spec, problem is it doesn’t inherit ANY values properly – see the 13 year old Bugzilla 915) for more</aside>