Table problems again 1

[noslenwerd]

Ok i have all the tables outlined via web developer plug in for fire fox so it makes it easier to see...

If you look at the tables outlined in red, they arent lined up correctly. the alignment on both are set to middle. And the width to both are set to 450... what is going on here?

 

[noslenwerd]

Also, why when i try to add a border to the tables in red, does it outline every cell, not just around the table? How can i get it to only outline the table?

 

[Foamcow]

HTML table borders include the borders of the cells too.
You can put a border just around the outline of the table using css.

<table style="border:1px solid black;">
<tr> 
<td>....</td>
</tr>
</table>

As for the alignment problem, it's virtually impossible to give a definite answer from a picture.
Post a link to the actual code, or the code itself.
As a guess I would say that there is something in the bottom table pushing it open. The top one "looks" to be 450px wide.

Tables (more correctly, table cells) will expand to accomodate their content. It's the way they work.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[noslenwerd]

thank you.. i will pull up the code now...

Is there anyway to just add an empty row infront of the second table in red? That will push all the text to the right a little bit?

 

[Foamcow]

Why not use CSS to pad them out?

I think a better option for you would be to explain what you want to achieve, post your current code and see what TT users come back with.

Not meaning to cause offence but don't patch shoddy code, get it right first. It will save you headaches in future.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[noslenwerd]

ok thanks...

Sorry im just starting out as a web developer and am getting used to tables of all things (never had to use them much in the past)

I figured why the bottom table was expanded... There were 2 cells next to each other, both with widths of 275.

I will report back soon

 

[Foamcow]

No probs.

I think you'd be well served to think about why you are using a table though.

From your picture it looks to me like a list of items each with a value?

Like a definition list. A standard HTML element.
Set it out in a definition list and then style that list so it looks and behaves like you want it to look.

Start with a definition list like so:

<dl>
	<dt>Item 1</dt>
	<dd>Value 1</dd>

	<dt>Item 2</dt>
	<dd>Value 2</dd>

	<dt>Item 3</dt>
	<dd>Value 3</dd>

	<dt>Item 4</dt>
	<dd>Value 4</dd>

	<dt>Item 5</dt>
	<dd>Value 5</dd>
</dl>

Look at that in your browser. Hmmm, not what we want eh?

Now add a sprinkle of simple CSS:

<style type="text/css">
	dt {
		clear:left;
		float:left;
		font-weight:bold;
	}
	
	dd {
		margin-left: 60px;	
	}
</style>

Bingo!
A list with 2 columns! Item -> Data

With a little more styling you can change the colours, fonts, backgrounds etc. In fact make it look just how you want.

The benefit.
ALOT simpler code, easier to maintain, less bandwidth, more accessible... much cooler. This is semantic markup.
It's a list, use a list element.

Since you are starting out in web dev you are in an ideal opportunity to learn to do stuff the new way. Learn how to use tables sure, but with the power of CSS at your fingertips it seems silly to learn the old, "bad" ways.

There is an argument that what you are producing is tabular data, if you agree then a table is OK I guess. But to me its structure looks more like a list than a table of data.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[noslenwerd]

thanks a lot for your help foamcow, problem is we have the same CSS controlling over 50 different jsp's. And they all have a similar table format to what im TRYING to get this one to do, so therefore if i do it for this page, i have to do it for all.

And i agree about using CSS, but i kind of have to stick with the tables with this one unfortunatly.

 

[Foamcow]

Well, fair enough. Although that is the beauty of CSS and Semantic markup. Because the markup is really simple, it's fast to do. Then you simply apply the same set of CSS rules via a linked or imported stylesheet and it's done.

However... tables

Am I right in thinking that you want a table with 2 columns?
Am I also correct in thinking that you want them to be the same width? If so, do you know whether any of the cell content will be bigger than the width of the cell?

It should be simple... something like so.

<table border="1" width="350">
  <tr>
    <td width="150">Order Number:</td><td width="200">123456789</td>
  </tr>
  <tr>
    <td>Deal Number:</td><td>12345678</td>
  </tr>
  <tr>
    <td>Vendor Order ID:</td><td>Value 3</td>
  </tr>
  <tr>
    <td>Product Type</td><td>Priority Photo</td>
  </tr>
    <tr>
    <td>Current Status</td><td>Order in the process of being assigned</td>
  </tr>
  <tr>
    <td colspan="2" height="10">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2">Add an attachment to this order</td>
  </tr>
  <tr>
    <td colspan="2">Add notes to this order</td>
  </tr>
</table>

Obviously there are no links or anything in there, but you should be able to fill in the rest!

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time