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:
    535 (0.27/day)
    Thanks Received:
    27
    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.27/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:
    535 (0.27/day)
    Thanks Received:
    27
    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:
    3,269 (1.34/day)
    Thanks Received:
    597
    Location:
    Geneva, FL, USA
    Give the table a style="border:1px solid black" instead of the border attribute.
    Akumos says thanks.
  5. Akumos

    Akumos

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

    Jizzler

    Joined:
    Aug 10, 2007
    Messages:
    3,269 (1.34/day)
    Thanks Received:
    597
    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.
  7. Akumos

    Akumos

    Joined:
    Nov 30, 2008
    Messages:
    535 (0.27/day)
    Thanks Received:
    27
    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)

Share This Page