colspan

Discussion in 'HTML & Website Design' started by manzoor, Jun 26, 2008.

  1. #1
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
      <head>
    	<title>Music City Mafia - Terry Lancaster</title>
      </head>
    
      <body>
    	<table cellspacing="5">
    	  <tr>
    		<td colspan="3">
    		  <div style="font-family:verdana, arial; font-size:18pt; font-weight:bold">16 -
    		  Terry Lancaster</div>
    		</td>
    	  </tr>
    	  <tr style="height:10px">
    		<td>
    		  <img src="tlancaster.jpg" alt="Terry &quot;Big T&quot; Lancaster" />
    		</td>
    		<td style="vertical-align:top">
    		  <div style="font-family:verdana, arial; font-size:12pt; color:navy">
    			<span style="font-weight:bold">Nickname:</span> Big T<br />
    			<span style="font-weight:bold">Position:</span> RW<br />
    			<span style="font-weight:bold">Height:</span> 6'3"<br />
    			<span style="font-weight:bold">Weight:</span> 195<br />
    			<span style="font-weight:bold">Shoots:</span> Left<br />
    			<span style="font-weight:bold">Age:</span> 40<br />
    			<span style="font-weight:bold">Birthplace:</span> 
    			<a href="http://en.wikipedia.org/wiki/Nashville%2C_Tennessee">Nashville, 
    			TN</a>
    		  </div>
    		</td>
    		<td style="vertical-align:top">
    		  <div style="font-family:verdana, arial; font-size:12pt; color:navy">
    			<span style="font-weight:bold">Favorite NHL Player:</span> 
    			<a href="http://www.nhl.com/players/8448091.html">Brett Hull</a><br />
    			<span style="font-weight:bold">Favorite NHL Team:</span> 
    			<a href="http://www.nashvillepredators.com/">Nashville Predators</a><br />
    			<span style="font-weight:bold">Favorite Southern Fixin:</span> 
    			<a href="http://southernfood.about.com/od/potatorecipes/r/blbb442.htm">
    			Skillet Fried Potatoes</a><br />
    			<span style="font-weight:bold">Favorite Meat and Three:</span> 
    			<a href="http://www.hollyeats.com/Swetts.htm">Swett's</a> 
    			(<a href="http://maps.google.com/maps?q=2725+clifton+ave,+nashville,+tn"
    			rel="external">map</a>)
    			<br />
    			<span style="font-weight:bold">Favorite Country Star:</span> 
    			<a href="http://www.patsycline.com/">Patsy Cline</a><br />
    			<span style="font-weight:bold">Favorite Mafia Moment:</span> 
    			"<a href="mcmplayer_chale.html">Chet</a> finishing the game with his 
    			eyelid completely slashed through."
    		  </div>
    		</td>
    	  </tr>
    	  <tr>
    		<td colspan="3">
    		  <table style="width:100%; text-align:right; font-family:verdana, arial; font-size:11pt; color:navy" border="1" >
    			<tr style="background-color:navy; color:white">
    			  <th style="text-align:left">Season</th>
    			  <th>GP</th>
    			  <th>G</th>
    			  <th>A</th>
    			  <th>P</th>
    			  <th>PIM</th>
    			  <th>PPG</th>
    			  <th>SHG</th>
    			  <th>GWG</th>
    			</tr>
    			<tr style="background-color:white">
    			  <td style="text-align:left">Summer 2005</td>
    			  <td>11</td>
    			  <td>7</td>
    			  <td>5</td>
    			  <td>12</td>
    			  <td>0</td>
    			  <td>0</td>
    			  <td>0</td>
    			  <td>0</td>
    			</tr>
    			<tr style="background-color:#EEEEEE">
    			  <td style="text-align:left">Winter 2004</td>
    			  <td>24</td>
    			  <td>14</td>
    			  <td>14</td>
    			  <td>28</td>
    			  <td>2</td>
    			  <td>0</td>
    			  <td>0</td>
    			  <td>5</td>
    			</tr>
    			<tr style="background-color:white">
    			  <td style="text-align:left">Summer 2004</td>
    			  <td>18</td>
    			  <td>9</td>
    			  <td>9</td>
    			  <td>18</td>
    			  <td>2</td>
    			  <td>0</td>
    			  <td>0</td>
    			  <td>2</td>
    			</tr>
    			<tr style="background-color:#EEEEEE">
    			  <td style="text-align:left">Spring 2004</td>
    			  <td>19</td>
    			  <td>7</td>
    			  <td>17</td>
    			  <td>24</td>
    			  <td>0</td>
    			  <td>0</td>
    			  <td>0</td>
    			  <td>1</td>
    			</tr>
    		  </table>
    		</td>
    	  </tr>
    	  <tr>
    		<td colspan="3">
    		  <div style="font-family:verdana, arial; font-size:12pt">
    			<a href="mailto:lancastert@musiccitymafia.com?subject=Fan Question&amp;body=What's your secret?">Contact Terry.</a>
    		  </div>
    		</td>
    	  </tr>
    	</table>
      </body>
    </html>
     
    Code (markup):
    Okay , sorry to overload, I can't understand this page layout with tables
    The first colspan="3" is I believe for the picture, and terry's bio and his favourites.

    I don't know whats the second colspan="3" and the third for ?

    And this is from my book, which doesn't explains everything, shit

    Any tutorial for understanding page layouts with tables or an explanation would be really appreciated.

    Thanks
     
    manzoor, Jun 26, 2008 IP
  2. hans

    hans Well-Known Member

    Messages:
    2,923
    Likes Received:
    126
    Best Answers:
    1
    Trophy Points:
    173
    #2
    hans, Jun 27, 2008 IP
  3. SLoB

    SLoB Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    tbh you would be better off putting that content into lists (rather than tables) and ditch the table and inline styling, create a separate css file for your style (you can still style it like a table)
    your page will speed up no end by doing that, your code will look much cleaner and look easier to follow visually too
     
    SLoB, Jun 27, 2008 IP