Link to home
Start Free TrialLog in
Avatar of jagr12
jagr12

asked on

HTML table

Rigt now this table is alight to left. I want to add a very thin border to the table and indent the table just a bit to the right, 10px. How can I do this?  I don't want to use css - margin

<table>       
            <tr>
                <td colspan="2" valign="top">
                  lableOrder
                  textboxOrder
                <td>
            <tr>
            <tr>
                <td colspan="2" valign="top">
                  lableAddress
                  textboxAddress
                <td>
            <tr>
	     <tr>
                <td colspan="2" valign="top">
                  lableCountry
                  textboxCountry
                <td>
            <tr>
		<tr>
                <td valign="top">
                  lableItemNumber
                  textboxItemNumber
                <td>
		<td valign="top">
                  lablePrice
                  textboxPrice
                <td>
            <tr>	
 <table>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Dr. Klahn
Dr. Klahn

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
here is everything you wanted to know about table borders & margins and were too afraid to ask: Examples of table borders and rules - W3C

but margin seems to be the only way to go to add space on the outer edges of a table :-(
You could also wrap your table in a div with a left padding.

But I'm curious why you don't want to use margins which would be the obvious choice.
Avatar of funwithdotnet
funwithdotnet

Here's how I'd do it:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Table Sample</title>
</head>

<body>
<table cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td><img src="spacerx.gif" width="10" height="10" alt=""/></td>
      <td>
      <table cellspacing="0" cellpadding="1" style="background-color: #000000;" >
  <tbody>
    <tr>
      <td><table width="200" cellspacing="1" cellpadding="1" style="background-color: #FFFFFF;">
  <tbody>
    <tr>
      <td>My</td>
      <td>Original</td>
      <td>Table</td>
    </tr>
    <tr>
      <td>My</td>
      <td>Original</td>
      <td>Table</td>
    </tr>
    <tr>
      <td>My</td>
      <td>Original</td>
      <td>Table</td>
    </tr>
  </tbody>
</table>
</td>
    </tr>
  </tbody>
</table>
</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Open in new window

spacerx.gif
Hi,

You can try to add 1 more table above current table and add 2 column and 1st <td> will have space how much you want and 2nd <td> have content.

Something like below example:
<table>
<tr>
 <td width="10"></td>
  <td>
    <table class='tablebox'>       
            <tr>
          
                <td colspan="2" valign="top">
                  lableOrder
                  textboxOrder
                <td>
            <tr>
            <tr>
      
                <td colspan="2" valign="top">
                  lableAddress
                  textboxAddress
                <td>
            <tr>
           <tr>

                <td colspan="2" valign="top">
                  lableCountry
                  textboxCountry
                <td>
            <tr>
            <tr>

                <td valign="top">
                  lableItemNumber
                  textboxItemNumber
                <td>
            <td valign="top">
                  lablePrice
                  textboxPrice
                <td>
            <tr>      
 </table>

  </td>
 </tr>
</table>

Open in new window


thanks
Why don't you want to use a margin?
Alternative wrap it in a div with padding
<div style="padding-left: 10px">
  <table>
   ...
   </table>
</div>

Open in new window

Or use a class
CSS
.padded-table {
   padding-left: 10px;
}

Open in new window

HTML
<div class="padded-table">
  <table>
   ...
   </table>
</div>

Open in new window