1. Welcome to TechPowerUp Forums, Guest! Please check out our forum guidelines for info related to our community.

HTML/CSS Table border question

Discussion in 'Programming & Webmastering' started by Akumos, Jan 2, 2011.

  1. Akumos

    Akumos

    Joined:
    Nov 30, 2008
    Messages:
    555 (0.17/day)
    Thanks Received:
    28
    Location:
    Birmingham, England...
    Hi All

    I'm trying to create a table with a border around the whole table...



    My code is below, but I'm having trouble trying to find how to add a border around the outline of the whole table instead of every cell? I'm using DW CS5.

    Thanks for reading!

    Code:
    <table width="90%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td colspan="4" bgcolor="#D4BF55">TITLE</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
     
    Last edited: Jan 2, 2011
  2. temp02 New Member

    Joined:
    Mar 18, 2009
    Messages:
    493 (0.16/day)
    Thanks Received:
    166
    Nested tables perhaps, main table with border and just one cell with a table with no border inside this only cell? Like this:
    HTML:
    <table width="90%" border="15">
    <tbody>
      <tr>
        <td>
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <td colspan="4" bgcolor="#D4BF55">TITLE</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
          </tbody>
          </table>
        </td>
      </tr>
    </tbody>
    </table>
     
    Last edited: Jan 2, 2011
    Akumos says thanks.
  3. Akumos

    Akumos

    Joined:
    Nov 30, 2008
    Messages:
    555 (0.17/day)
    Thanks Received:
    28
    Location:
    Birmingham, England...
    Thanks for the fast reply temp!!

    I have already made most of the layouts and doing it this way would take me a while (some of the borders I only want around half the table).

    Is there a way of adding individual properties (eg. border-left or border-bottom (or the HTML equivilant) to the <td> tag?
     
  4. Jizzler

    Jizzler

    Joined:
    Aug 10, 2007
    Messages:
    4,019 (1.10/day)
    Thanks Received:
    1,063
    Location:
    Geneva, FL, USA
    Give the table a style="border:1px solid black" instead of the border attribute.
     
    Akumos says thanks.
    10 Year Member at TPU Crunching for Team TPU
  5. Akumos

    Akumos

    Joined:
    Nov 30, 2008
    Messages:
    555 (0.17/day)
    Thanks Received:
    28
    Location:
    Birmingham, England...
    Where does the style tag go? inside <table...
     
  6. Jizzler

    Jizzler

    Joined:
    Aug 10, 2007
    Messages:
    4,019 (1.10/day)
    Thanks Received:
    1,063
    Location:
    Geneva, FL, USA
    Yup. This would put a border on the table only. You can of course style it beyond my example.

    HTML:
    <table style="border:1px solid black">
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>

    For your other question, can make a class to style multiple tags.

    HTML:
    <style type="text/css">
    .bl { border-left:1px solid black; }
    </style>
    
    <table>
        <tr>
            <td class="bl">&nbsp;</td>
            <td class="bl">&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
    
    Like many things in life, there are several ways to accomplish these things. This is just one of them.
     
    Akumos says thanks.
    10 Year Member at TPU Crunching for Team TPU
  7. Akumos

    Akumos

    Joined:
    Nov 30, 2008
    Messages:
    555 (0.17/day)
    Thanks Received:
    28
    Location:
    Birmingham, England...
    Works perfectly, thanks Jizzler! I didn't know about styles!

    Is there a way to apply a style to text.. kind of like h1, h2, h3 etc... When I try to reformat h2, h3 etc... I get a big gap underneath the text which I dont want!
     

Currently Active Users Viewing This Thread: 1 (0 members and 1 guest)