SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Dec 2003
    Location
    NEW JERSEY
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question need some help with tables...

    Hey guys.. i need some help with tables.

    I have the following table...

    HTML Code:
    <div id="personaldiv">
    	<table>
    		<tr>
    			<td width="151"><h2>Name:</h2></td>
    			<td width="274"><h3>John Doe </h3></td>
    		</tr>
    		<tr>
    			<td width="151"><h2>Gender:</h2></td>
    			<td width="274"><h3>Male </h3></td>
    		</tr>
    		<tr>
    			<td width="151"><h2>Age:</h2></td>
    			<td width="274"><h3>999 </h3></td>
    		</tr>
    	</table>
    </div>


    and heres the css i have...



    HTML Code:
    /* section content labels */	
    h2 {
    	background-color: #F4F4F4;
    	color: #000000;
    	font-size: 8pt;
    	font-weight: bold;
    	margin-left: 10px;
    	line-height: 100%;
    }
    
    /* section content text */
    h3 {
    	background-color: #F4F4F4;
    	color: #000000;
    	font-size: 8pt;
    	font-weight: normal;
    	line-height: 100%;
    }
    
    /* personal div */
    #personaldiv {
    	color: black;
    	background: #F4F4F4;
    	border-left: 1px solid black;
    	border-bottom: 1px solid black;
    	border-right: 1px solid black;
    	position: relative;
    	z-index: 1;
    	width: 456px;
    }


    ok heres my problem...
    I dont like how the table displays.
    The row height is too tall..
    I want to shrink the rows so the table isn't so large.. i want everything to be closer together.
    Is this possible?

    Thanks,
    Chris

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    That's far too much CSS for such a simple design.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    #personal {
    	color: black;
    	background: #F4F4F4;
    	border: 1px solid black;
    	border-collapse: collapse;
    	border-top: none;
    	width: 456px;
    }
    th {
    	/* cell styling here */
    	text-align: left;
    	width: 151px;
    }
    td {
    	/* cell styling here */
    }
    </style>
    </head>
    
    <body>
    <table id="personal">
    	<tr>
    		<th>Name:</th>
    		<td>John Doe</td>
    	</tr>
    	<tr>
    		<th>Gender:</th>
    		<td>Male</td>
    	</tr>
    	<tr>
    		<th>Age:</th>
    		<td>999</td>
    	</tr>
    </table>
    </body>
    </html>
    Headings are innapropriate and you don't need anything else in the markup. The space was caused from the default margin/padding applied to headings.

  3. #3
    SitePoint Member
    Join Date
    Dec 2003
    Location
    NEW JERSEY
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you!


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
  •