Web Analytics Made Easy -
StatCounter css tables help - CodingForum

Announcement

Collapse
No announcement yet.

css tables help

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • css tables help

    Code:
    <style type="text/css">
    td { position: relative; }
    td { left: 15px; }
    td:first-child { left: 0px; }
    td:nth-child(3) { left: 15px; } 
    </style>
    <table style="width:100%" border="1">
    <tr>
    <td width="316" valign="top"><a href="xxxxxxxxxxxxxxxxxx">About Us</a>
    <p>Learn about how this website works and what technologies it uses to create a child friendly search and portal.</p></td>
    <td width="316" valign="top"><a href=xxxxxxxxxxxx">Contact Us</a>
    <p>Contact Kid's Search via our online web form or through e-mail. We will get back with you as soon as possible</p></td>
    <td width="316" valign="top"><a href="xxxxxxxxxxxxx">Donate</a>
    <p>Help support this website by giving a donation directly to us as a onetime contribution or through our Patreon account.</p></td>
    </tr></table>


    I need space between the second and third td. Can someone help please and thanks.

  • #2
    Hi there canadacatman,

    you could, possibly, try it like this...

    Code:
    [color=navy]
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <!--<link rel="stylesheet" href="screen.css" media="screen">-->
    
    <style media="screen">
    body {
        background-color: #f0f0f0;
     }
    
    #container {
        display: flex;
        padding: 0.25em;
        border: 0.06em solid #999;
        background-color: #fff;
     }
    
    #container div {
        padding: 1em;
        margin: 0.25em;
        border: 0.06em solid #999;
     }
    
    #container div:nth-child(1) {
        background-color: #fee;
     }
    
    #container div:nth-child(2) {
        background-color: #efe;
     }
    
    #container div:nth-child(3) {
        background-color: #eef;
     }
    
    @media screen and (max-width:30em) {
    
    #container {
        display:block;
      }
    
    #container div:nth-child(2) {
        margin: 0.5em 0.25em;
      }
     }
    </style>
    
    </head>
    <body> 
    
    <div id="container">
    <div>
     <a href="about.html">About Us</a>
      <p>
       Learn about how this website works and what technologies 
       it uses to create a child friendly search and portal.
      </p>
    </div>
    
    <div>
     <a href="contact.html">Contact Us</a>
      <p>
       Contact Kid's Search via our online web form or through 
       e-mail. We will get back with you as soon as possible
      </p>
    </div>
    
    <div>
     <a href="donate.html">Donate</a>
      <p>
       Help support this website by giving a donation directly to 
       us as a onetime contribution or through our Patreon account.
      </p>
    </div>
    
    </div>
    
    </body>
    </html>[/color]

    coothead
    ~ the original bald headed old fart ~

    Comment


    • #3
      Originally posted by canadacatman View Post
      I need space between the second and third td.
      You can't put space between <td>s - you can only assign padding and margins to the content of the <td>

      Note that border="1" was removed from HTML in 1997.
      Stephen
      Learn Modern JavaScript - http://javascriptexample.net/
      Helping others to solve their computer problem at http://www.felgall.com/

      Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

      Comment

      Working...
      X