SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    737
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Basics on html Table with CSS elements not inline

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

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    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
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    737
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thanks

    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,164
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    You can either give it a special class—like any other element—

    Code:
    <table class="whatever">
    or reference it from a container element—

    Code:
    <div class="main">
      <table>
      </table>
    </div>
    Code:
    .main table { ... }

  5. #5
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    ... and done properly you may not even need child classes...

    Code:
    <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:

    Code:
    .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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •