Formatting a table

loveday · Jan 11, 2005

Please forgive me for this cheap question.

Please take a look at the code below:

Code:

		<table width='100%' border=1 cellspacing=0 cellpadding=0 bordercolor="aqua">
		<tr>

         <td class=bodytextcolor width='33%' align=center nowrap>
         <img src="Images/dress_search.jpg" align="center" WIDTH='130' HEIGHT='125'>
         <br/>Yosemite National Park
         <br/><font color=green>10 or more:</font>
         <br/><font size=-1><a href="product.asp?id=10">More...</a></font>
         <br/><form action="addprod.asp" method="POST" onSubmit="return checkItems(this)">
         <input type="hidden" name="fproductid" value="10">
         </form></td>

         <td class=bodytextcolor width='33%' align=center nowrap>
         <img src="Images/position5_8cd0a.jpg" align="center" WIDTH='130' HEIGHT='125'>
         <br/>Yosemite Falls
         <br/><font color=green>10 or more:</font>
         <br/><font size=-1><a href="product.asp?id=11">More...</a></font>
         <br/><form action="addprod.asp" method="POST" onSubmit="return checkItems(this)">
         <input type="hidden" name="fproductid" value="11">
         </form></td>

         <td class=bodytextcolor width='33%' align=center nowrap>
         <img src="Images/Fossil010505.jpg" align="center" WIDTH='130' HEIGHT='125'>
         <br/>Yosemite view
         <br/><font color=green>10 or more:</font>
         <br/><font size=-1><a href="product.asp?id=12">More...</a></font>
         <br/><form action="addprod.asp" method="POST" onSubmit="return checkItems(this)">
         <input type="hidden" name="fproductid" value="12">
         </form></td>
         </td>
         </tr>
       	 </table>

This code puts a border around tht tables display the aqua color.

The problem I have is that the border color is too big.

How can I format the table in such that I still get the border around the tables, with the same color but the border lines are much thinner?

I hope this question is clear.

Thanks in advance.

Again, sorry for the cheap question.

chessbot · Jan 11, 2005

Try this:

Code:

<table style="border: 1px solid aqua;">

--Chessbot

"In that blessed region of Four Dimensions, shall we linger on the threshold of the Fifth, and not enter therein? Ah, no! [...] Then, yielding to our intellectual onset, the gates of the Sixth Dimension shall fly open; after that a Seventh, and then an Eighth -- --" Flatland, A. Square (E. A. Abbott)

loveday · Jan 11, 2005

That's it!

Thanks chessbot.

Just curious, is there something thinner than 1px?

If not, this is much better than what I had before.

dkdude · Jan 12, 2005

chessbot is absolutely right - use CSS!

Looking through you code I see a lot of missing quotes around the attribute values... that's not good ;-) and should be fixed.

However, I took it "all the way" and made some CSS classes to make things a bit easier. Have a look ak this XHTML example:

Code:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
  <title>Loveday's page</title>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <style type="text/css">
    .myTable {
      width		: 100%;
      border-top	: solid 1px aqua;
      border-left	: solid 1px aqua;
      border-collapse	: collapse;
      text-align	: center;
    }

    .myCell {
      width		: 33%;
      border-right	: solid 1px aqua;
      border-bottom	: solid 1px aqua;
      padding		: 0px;
      white-space     : nowrap;
    }

    .more {
      color		: green;
    }

    .myCell a {
      font-size		: x-small;
    }
  </style>
</head>

<body>
  <table class="myTable">
    <tr>
      <td class="myCell">
        <img src="Images/dress_search.jpg" width="130" height="125" alt="Yosemite National Park" />
        <br />Yosemite National Park
        <br /><span class="more">10 or more:</span>
        <br /><a href="product.asp?id=10">More...</a>
        <br />
        <form action="addprod.asp" method="post" onsubmit="return checkItems(this)">
          <input type="hidden" name="fproductid" value="10" />
        </form>
      </td>
      <td class="myCell">
        <img src="Images/position5_8cd0a.jpg" width="130" height="125" alt="Yosemite Falls" />
        <br />Yosemite Falls
        <br /><span class="more">10 or more:</span>
        <br /><a href="product.asp?id=11">More...</a>
        <br />
        <form action="addprod.asp" method="post" onsubmit="return checkItems(this)">
          <input type="hidden" name="fproductid" value="11" />
        </form>
      </td>
      <td class="myCell">
        <img src="Images/Fossil010505.jpg" width="130" height="125" alt="Yosemite view" />
        <br />Yosemite view
        <br /><span class="more">10 or more:</span>
        <br /><a href="product.asp?id=12">More...</a>
        <br />
        <form action="addprod.asp" method="post" onsubmit="return checkItems(this)">
          <input type="hidden" name="fproductid" value="12" />
        </form>
      </td>
    </tr>
  </table>
</body>
</html>

If you want to learn more about CSS (and XHTML for that matter) then drop by

http://www.w3schools.com/

-they have really nice references

Best Regards

Jakob

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Formatting a table

loveday

Programmer

chessbot

Programmer

loveday

Programmer

dkdude

Programmer

Similar threads

Part and Inventory Search

Sponsor