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

HTML/CSS Table border question

Joined
Nov 30, 2008
Messages
555 (0.17/day)
Likes
28
Location
Birmingham, England...
Processor Intel Core 2 Quad Q6600 @ 2.8GHz
Motherboard Gigabyte X48T-DQ6
Cooling Zalman 9500 LED CPU Cooler
Memory 2x 2GB Corsair DDR3 XMS3 DHX - 1600MH/PC3-12800
Video Card(s) Gigabyte HD4870 1GB
Storage 2x Seagate 320GB Barracuda (RAID 0) 3x 1TB Samsung F3, 140GB WD Maxtor (10,000rpm)
Display(s) 2x 20" LG Flatron L204WS
Power Supply Powercool 850W
Software Windows 7 Ultimate x64
#1
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:

temp02

New Member
Joined
Mar 18, 2009
Messages
493 (0.15/day)
Likes
165
#2
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:
Joined
Nov 30, 2008
Messages
555 (0.17/day)
Likes
28
Location
Birmingham, England...
Processor Intel Core 2 Quad Q6600 @ 2.8GHz
Motherboard Gigabyte X48T-DQ6
Cooling Zalman 9500 LED CPU Cooler
Memory 2x 2GB Corsair DDR3 XMS3 DHX - 1600MH/PC3-12800
Video Card(s) Gigabyte HD4870 1GB
Storage 2x Seagate 320GB Barracuda (RAID 0) 3x 1TB Samsung F3, 140GB WD Maxtor (10,000rpm)
Display(s) 2x 20" LG Flatron L204WS
Power Supply Powercool 850W
Software Windows 7 Ultimate x64
#3
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?
 
Joined
Aug 10, 2007
Messages
4,064 (1.06/day)
Likes
1,130
Location
Geneva, FL, USA
Processor Intel i5-6600
Motherboard ASRock H170M-ITX
Cooling Cooler Master Geminii S524
Memory G.Skill DDR4-2133 16GB (8GB x 2)
Video Card(s) Gigabyte R9-380X 4GB
Storage Samsung 950 EVO 250GB (mSATA)
Display(s) LG 29UM69G-B 2560x1080 IPS
Case Lian Li PC-Q25
Audio Device(s) Realtek ALC892
Power Supply Seasonic SS-460FL2
Mouse Logitech G700s
Keyboard Logitech G110
Software Windows 10 Pro
#4
Give the table a style="border:1px solid black" instead of the border attribute.
 
Joined
Nov 30, 2008
Messages
555 (0.17/day)
Likes
28
Location
Birmingham, England...
Processor Intel Core 2 Quad Q6600 @ 2.8GHz
Motherboard Gigabyte X48T-DQ6
Cooling Zalman 9500 LED CPU Cooler
Memory 2x 2GB Corsair DDR3 XMS3 DHX - 1600MH/PC3-12800
Video Card(s) Gigabyte HD4870 1GB
Storage 2x Seagate 320GB Barracuda (RAID 0) 3x 1TB Samsung F3, 140GB WD Maxtor (10,000rpm)
Display(s) 2x 20" LG Flatron L204WS
Power Supply Powercool 850W
Software Windows 7 Ultimate x64
#5
Where does the style tag go? inside <table...
 
Joined
Aug 10, 2007
Messages
4,064 (1.06/day)
Likes
1,130
Location
Geneva, FL, USA
Processor Intel i5-6600
Motherboard ASRock H170M-ITX
Cooling Cooler Master Geminii S524
Memory G.Skill DDR4-2133 16GB (8GB x 2)
Video Card(s) Gigabyte R9-380X 4GB
Storage Samsung 950 EVO 250GB (mSATA)
Display(s) LG 29UM69G-B 2560x1080 IPS
Case Lian Li PC-Q25
Audio Device(s) Realtek ALC892
Power Supply Seasonic SS-460FL2
Mouse Logitech G700s
Keyboard Logitech G110
Software Windows 10 Pro
#6
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.
 
Joined
Nov 30, 2008
Messages
555 (0.17/day)
Likes
28
Location
Birmingham, England...
Processor Intel Core 2 Quad Q6600 @ 2.8GHz
Motherboard Gigabyte X48T-DQ6
Cooling Zalman 9500 LED CPU Cooler
Memory 2x 2GB Corsair DDR3 XMS3 DHX - 1600MH/PC3-12800
Video Card(s) Gigabyte HD4870 1GB
Storage 2x Seagate 320GB Barracuda (RAID 0) 3x 1TB Samsung F3, 140GB WD Maxtor (10,000rpm)
Display(s) 2x 20" LG Flatron L204WS
Power Supply Powercool 850W
Software Windows 7 Ultimate x64
#7
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!