techPowerUp! Forums

Go Back   techPowerUp! Forums > Software > Programming & Webmastering

Reply
 
Thread Tools
Old Jan 2, 2011, 12:31 PM   #1
Akumos
200 Posts
 
Akumos's Avatar
 
Join Date: Nov 2008
Location: Birmingham, England...
Posts: 472 (0.29/day)
Thanks: 72
Thanked 27 Times in 22 Posts

System Specs

HTML/CSS Table border question

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 by Akumos; Jan 2, 2011 at 12:42 PM.
Akumos is offline  
Reply With Quote
Old Jan 2, 2011, 12:42 PM   #2
temp02
200 Posts
 
Join Date: Mar 2009
Posts: 490 (0.32/day)
Thanks: 0
Thanked 171 Times in 158 Posts

Nested tables perhaps, main table with border and just one cell with a table with no border inside this only cell? Like this:
HTML Code:
<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 by temp02; Jan 2, 2011 at 12:55 PM.
temp02 is offline  
Reply With Quote
The Following User Says Thank You to temp02 For This Useful Post:
Old Jan 2, 2011, 01:00 PM   #3
Akumos
200 Posts
 
Akumos's Avatar
 
Join Date: Nov 2008
Location: Birmingham, England...
Posts: 472 (0.29/day)
Thanks: 72
Thanked 27 Times in 22 Posts

System Specs

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?
__________________
Akumos is offline  
Reply With Quote
Old Jan 2, 2011, 01:04 PM   #4
Jizzler
2000 Posts
 
Jizzler's Avatar
 
Join Date: Aug 2007
Location: Geneva, FL, USA
Posts: 3,010 (1.42/day)
Thanks: 567
Thanked 606 Times in 487 Posts

System Specs

Give the table a style="border:1px solid black" instead of the border attribute.
Jizzler is offline  
Reply With Quote
The Following User Says Thank You to Jizzler For This Useful Post:
Old Jan 2, 2011, 01:08 PM   #5
Akumos
200 Posts
 
Akumos's Avatar
 
Join Date: Nov 2008
Location: Birmingham, England...
Posts: 472 (0.29/day)
Thanks: 72
Thanked 27 Times in 22 Posts

System Specs

Where does the style tag go? inside <table...
__________________
Akumos is offline  
Reply With Quote
Old Jan 2, 2011, 01:35 PM   #6
Jizzler
2000 Posts
 
Jizzler's Avatar
 
Join Date: Aug 2007
Location: Geneva, FL, USA
Posts: 3,010 (1.42/day)
Thanks: 567
Thanked 606 Times in 487 Posts

System Specs

Yup. This would put a border on the table only. You can of course style it beyond my example.

HTML Code:
<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 Code:
<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.
Jizzler is offline  
Reply With Quote
The Following User Says Thank You to Jizzler For This Useful Post:
Old Jan 3, 2011, 01:06 PM   #7
Akumos
200 Posts
 
Akumos's Avatar
 
Join Date: Nov 2008
Location: Birmingham, England...
Posts: 472 (0.29/day)
Thanks: 72
Thanked 27 Times in 22 Posts

System Specs

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!
__________________
Akumos is offline  
Reply With Quote
Reply


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

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
HTML DOM, Javascript Question ct5098 Programming & Webmastering 6 Dec 24, 2010 08:01 PM
some html php and mysql mixed question r9 Programming & Webmastering 2 Aug 30, 2009 04:24 PM
quick HTML question Braveheart Programming & Webmastering 3 Jul 5, 2009 08:42 AM
Css & Html Wozzer Programming & Webmastering 12 Sep 22, 2008 01:29 PM
Html/css Thermopylae_480 General Software 1 Oct 10, 2006 02:04 PM


All times are GMT. The time now is 10:18 AM.


Powered by vBulletin® Version 3.8.6
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.
no new posts