[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 85
  • Last Modified:

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

0
jagr12
Asked:
jagr12
1 Solution
 
Dr. KlahnPrincipal Software EngineerCommented:
You could try putting the original table inside another table:

<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD>&nbsp;</TD>
<TD>original table goes here</TD>
</TR>
</TABLE>

Open in new window


The non-breaking space in the first column will give approximately 10 pixels width.  If precise width is required, a 10 pixel blank image can be inserted, or use another method to space exactly.
0
 
Paul SauvéCommented:
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 :-(
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
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.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
funwithdotnetCommented:
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
0
 
pradeep kumarSr. UI Developer Commented:
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
0
 
Julian HansenCommented:
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

0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now