SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Styling a table using css

    Hey,

    I found this styling on the web:

    HTML Code:
    <!-- Table markup -->
    
    <table>
    
    	<!-- Table header -->
    
    		<thead>
    			<tr class="yellow">
    				<th>Seizoen</th>
    				<th>1 week</th>
    				<th>midweek</th>
    				<th>lang weekend</th>
    				<th>kort weekend</th>
    			</tr>
    		</thead>
    
    	<!-- Table body -->
    		
    		<tbody>
    			<tr>
    				<td>Hoogseizoen</td>
    				<td>1372</td>
    				<td>950</td>
    				<td>750</td>
    				<td>500</td>>
    			</tr>
    			<tr>  
                    <td>Laagseizoen</td>  
    				<td>1000</td>
    				<td>800</td>
    				<td>550</td>
    				<td>437</td>
                </tr> 
    		</tbody>
    </table>
    Code:
    table {
    	font: 11px/24px Verdana, Arial, Helvetica, sans-serif;
    	border-collapse: collapse;
    	width: 540px;
    	}
    	
    th {
    	padding: 0 0.5em;
    	text-align: left;
    	border-left: 1px solid #CCC;
    	}
    	
    tr.yellow th{
    	border-top: 1px solid #FB7A31;
    	border-bottom: 1px solid #FB7A31;
    	background: #FFC;
    	}
    	
    td {
    	border-bottom: 1px solid #CCC;
    	padding: 0 0.5em;
    	}
    	
    td:first-child {
    	width: 120px;
    	}
    	
    td+td {
    	border-left: 1px solid #CCC;
    	text-align: center;
    	}
    Now when i execute this code i get an "<" artifact at the top of the table. Anyone knows where this comes from ?

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    See Line 25: <td>500</td>> and remove the extra '>'.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh. thanks

  4. #4
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    No worries, a good tip is to use the W3C Validator first http://validator.w3.org/ if you cannot see a HTML markup syntax issue yourself.

    I spotted it without having to use it, though it comes in useful; when 'you cannot see the Wood for the trees'.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks!


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
  •