How do I adjust the space in TD and TR

[genzedu777]

Hi all,

 

I am trying to make the contents on column 2 to be closer to column 1

 

 

echo '<tr><td class="label">Name:</td><td>' . $row['name'] . '</td></tr>';

For example,

<td class="label">Name:</td> to be closer to <td>' . $row['name'] . '</td>

 

Now, as you can see in the attachment, there is a wide space in between these 2 <td>, how do I make them closer to each other?

 

I have tried writing out some codes, do I start off with these codes, or are there better advice? Thanks

 

#panel1 table {

????

}

#panel1 td {

padding: 0;

margin: 0;

}

 

 

<?php
echo '
<ul id="tabSet_vp">
	<li><a href="#panel1">Personal Profile</a></li>
	<li><a href="#panel2">Qualifications</a></li>
	<li><a href="#panel3">Tutor\'s Comments/Commitment</a></li>
	<li><a href="#panel4">Tutoring Levels/Subjects</a></li>
</ul>
';

echo '<div id="panel1">';
echo '<table>';
//Name
    if (!empty($row['name'])) {
      echo '<tr><td class="label">Name:</td><td>' . $row['name'] . '</td></tr>';
    }
//Nric
    if (!empty($row['nric'])) {
      echo '<tr><td class="label">NRIC:</td><td>' . $row['nric'] . '</td></tr>';
    }
    if (!empty($row['last_name'])) {
      echo '<tr><td class="label">Last name:</td><td>' . $row['last_name'] . '</td></tr>';
    }
//Gender
    if (!empty($row['gender'])) {
      echo '<tr><td class="label">Gender:</td><td>';
      if ($row['gender'] == 'M') {
        echo 'Male';
      }
      if ($row['gender'] == 'F') {
        echo 'Female';
      }
      echo '</td></tr>';
    }
//Race
if (!empty($row['race'])) {
      echo '<tr><td class="label">Race:</td><td>' . $row['race'] . '</td></tr>';
    }

//Religion
if (!empty($row['religion'])) {
      echo '<tr><td class="label">Religion:</td><td>' . $row['religion'] . '</td></tr>';
    }
//Teaching Credentials
if (!empty($row['teaching_credentials'])) {
      echo '<tr><td class="label">Teaching Credentials:</td><td>' . $row['teaching_credentials'] . '</td></tr>';
    }
//Tutoring Status
if (!empty($row['tutoring_status'])) {
      echo '<tr><td class="label">Tutoring Status:</td><td>' . $row['tutoring_status'] . '</td></tr>';
    }
//Occupation
if (!empty($row['occupation'])) {
      echo '<tr><td class="label">Occupation:</td><td>' . $row['occupation'] . '</td></tr>';
    }
//Address
if (!empty($row['address'])) {
      echo '<tr><td class="label">Address:</td><td>' . $row['address'] . '</td></tr>';
    }
//Postal Code
if (!empty($row['postal_code'])) {
      echo '<tr><td class="label">Postal Code:</td><td>' . $row['postal_code'] . '</td></tr>';
    }
//Home Number
if (!empty($row['hse_phone'])) {
      echo '<tr><td class="label">Home Number:</td><td>' . $row['hse_phone'] . '</td></tr>';
    }
//Handphone Number
if (!empty($row['hp'])) {
      echo '<tr><td class="label">Hp Number:</td><td>' . $row['hp'] . '</td></tr>';
    }
echo '</div>'; //End of Panel 1


    echo '</table>'; //End of Table
?>

 

[attachment deleted by admin]

[jdavidbakr]

That's not space between the columns, that's the width of the columns.  If you have the FireFox developer tools, turn on table outlines and you'll see what I mean.  Or, turn on borders on your table.

 

It looks like your table width is set to 100%.  I this case, the columns will stretch to fit the table based on their content.  You'll either need to explicitly set the size of td.label, or make sure your table width is not 100%.

[fortnox007]

I recommend using a reset.css first to rest all browser differences with this, otherwise you will have even more troubles. meyers reset seems to do a good job.

[genzedu777]

Hi guys,

 

Thanks for the advice, after heeding the advice of fortnox007, to reset the css script, it seems like my contents and comments boxes are aligned in all browser.

 

However my wordings are very close to each other, meaning to say the 'top sentence' and the 'bottom sentence' are very close to each other, attached is the example. May I know how to spread out the spacing in between the lines? Using padding?

 

 

reset.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

 

[attachment deleted by admin]

[fortnox007]

I assume you mean the line-height? IN that case use: http://www.w3schools.com/css/pr_dim_line-height.asp

 

The thing with the reset.css (place it above your normal css btw) is that anything is reset. so after a while you will end up with your own reset in addition to meyers reset.