Tricks: How to...
Image effects:
› Preload images
› Preload images 2
› Swap images
› Swap images 2
› View larger image
› Image transparency
› Image slideshow
Special effects:
› Border
› Border 2
› Watermark
› Scroller
› Scroller 2
› Link hover color
› Custom cursor
› Snowing
› Auto window resizer
› Link tips
› Popup
Buttons & menus:
› Back button
› Java buttons
› Flat buttons
› Slide menu
› Drop down menu
› Alphabet menu
Mouse effects:
› Elastic mouse
› Mouse snake
› Mouse stars
› Mouse orbit
› Mouse eyes
Text generators:
› Infobox
› Quote generator
› Fading messages
› Text fader
› Text glow
› Credits

home > real world > web resource > web source codes >

To give a table a border you don't have to work with nested tables. First define the style of the border like this:

<style>
.mytableborder {
border-width: 1px;
border-style: solid;
border-color: #CCCCCC;
}
</style>

You put this style declaration either in an external stylesheet or in the <head> section and apply it to the table as follows:

<table class="mytableborder">
   <tr>
      <td>Content text and more content</td>
   </tr>
</table>

That should give you a thin grey border around this table. Here it is:

Content text and more content

You can apply this style only to a single cell of the table:

<table>
   <tr>
      <td class="mytableborder">Content text</td>
      <td>and more content</td>
   </tr>
   <tr>
      <td>Content text</td>
      <td class="mytableborder">and more content</td>
   </tr>
</table>

Here it is:

Content text	and more content
Content text	and more content

...or to a paragraph (the following is not a table):

<p class="mytableborder">Content text and more content</p>

Here it is:

Content text and more content

...or to a word:

<p>Content <span class="mytableborder">text</span> and more content</p>

Here it is:

Content text and more content