HTML Help

Polemos

United States160 Posts

August 09 2011 14:54 GMT

Hi!
Recently, I've been teaching myself HTML and CSS, with a bit of javascript thrown in. Unfortunately, I have run into a block, and I can't seem to find an error with my code (it's really, really simple.) I've looked at it for hours, and I still can't find an error. I was wondering if anyone could help :/ I'll put all the info in a spoiler below.

+ Show Spoiler +

http://dev.ieworks.net/devtest/location_add.html

+ Show Spoiler +

<!DOCTYPE html>
<head>
<title>Pop-Up Location Form</title>
</head>
<body>
<table>
<tr>
<td>Name: <input type="text" id="loc_name" /></td>
</tr>
<tr>
<td >Address 1: <input type="text" id="loc_add_1" /></td>
</tr>
<tr>
<td>Address 2: <input type="text" id="loc_add_2" /></td>
</tr>
<tr>
<td>City:<input type="tex" id="city_add" /></td>
<td>State: <select name="state" />
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select></td>
<td>Zip Code:<input type="Text" id="loc_zip" /></td>
</tr>
<tr>
<td><input type="button" id="button_cancel" value="Cancel" /></td>
<td><input type="button" id="button_save" value="Save" /></td>
</tr>
</table>
</body>
</html>

P.S. I've run it through a code validator to no avail, and I've tried using Firebug, but I can't figure out how to use it ._.

Deleted User 101379

4849 Posts

August 09 2011 14:58 GMT

On August 09 2011 23:54 Polemos wrote:
Hi!
Recently, I've been teaching myself HTML and CSS, with a bit of javascript thrown in. Unfortunately, I have run into a block, and I can't seem to find an error with my code (it's really, really simple.) I've looked at it for hours, and I still can't find an error. I was wondering if anyone could help :/ I'll put all the info in a spoiler below.

+ Show Spoiler +

http://dev.ieworks.net/devtest/location_add.html

+ Show Spoiler +

P.S. I've run it through a code validator to no avail, and I've tried using Firebug, but I can't figure out how to use it ._.

<select name="state" />

There is your mistake.
Remove the / in the opening select tag.

NihiLStarcraft

Denmark1413 Posts

August 09 2011 14:58 GMT

It'd probably save time if you let us know what the problem is? :p

EDIT: Ninja'd.

Polemos

United States160 Posts

August 09 2011 14:59 GMT

I have done so, but it still hasn't done anything with my formatting issues ._.

Polemos

United States160 Posts

August 09 2011 15:00 GMT

Look at the first spoiler. Since it's in a table, all the text inputs, and name address & w/e should be lining up, but they aren't. My issue is finding out why they aren't lining up.

Deleted User 101379

4849 Posts

August 09 2011 15:01 GMT

On August 09 2011 23:59 Polemos wrote:
I have done so, but it still hasn't done anything with my formatting issues ._.

Ok, what are your formatting issues then?
Edit: Now i got Ninjaed.

They are aligning up exactly like you wrote in the code.
The layout is exactly as defined.

However, your table structure is broken in a logical/semantical way, not a syntactical way.

A table has a defined number of rows and columns and should have the same number of columns in every row.
Your first 3 rows only have 1 column (td)


		<tr> 
->>>			<td>Name: <input type="text" id="loc_name" /></td> 
		</tr> 
		<tr> 
->>>			<td	>Address 1: <input type="text" id="loc_add_1" /></td> 
		</tr> 
		<tr> 
->>>			<td>Address 2: <input type="text" id="loc_add_2" /></td> 
		</tr>

Your fourth row has 3


		<tr> 
->>>			<td>City:<input type="tex" id="city_add" /></td> 
->>>			<td>State: <select name="state"> 
	<option value="AL">Alabama</option> 
..snip..
</select></td> 
->>>	<td>Zip Code:<input type="Text" id="loc_zip" /></td> 
	</tr>

Your fifth row has 2:


	<tr> 
->>>	<td><input type="button" id="button_cancel" value="Cancel" /></td> 
->>>	<td><input type="button" id="button_save" value="Save" /></td> 
	</tr>

You probably want to have the label in a seperate column.

Polemos

United States160 Posts

August 09 2011 15:02 GMT

Look up one post

Moff

United Kingdom166 Posts

August 09 2011 15:07 GMT

http://jsfiddle.net/BjgW4/

Is that what you wanted?

Since you put two <td> inside one <tr> it messed up the formatting.

Polemos

United States160 Posts

August 09 2011 15:13 GMT

So, if I understand you correctly Morf, I can only have like
<tr>
<td>xxxx</td>
</tr>

and no other TD's in there?

Polemos

United States160 Posts

August 09 2011 15:13 GMT

#10

Assuming that I want them to be all lined up

lolsixtynine

United States600 Posts

August 09 2011 15:17 GMT

#11

No, you can have multiple tds in a tr, you just need to have the same number in each or the formatting can get wacky. Normally if you have the same number of td's in each row, it will automatically align them into columns.

Edit for example:

You currently have

<td>Name: <input type="text" id="loc_name" /></td>

You want:

<td>Name: </td> 
<td> <input type="text" id="loc_name" /></td>

Deleted User 101379

4849 Posts

August 09 2011 15:19 GMT

#12

On August 10 2011 00:13 Polemos wrote:
So, if I understand you correctly Morf, I can only have like
<tr>
<td>xxxx</td>
</tr>

and no other TD's in there?

You can have as many as you want, you should just always have the same number of <td>s in all <tr>s of the same table.

<tr> starts a new row (table row)
<td> starts a new column (table data)

A table is always a rectangle.
For example, a table 2 cells wide, 5 rows high would be:
(Using dummy content)


<table>
  <tr>
    <td>Name</td>
    <td><input type="text" name="name" /></td>
  </tr>
  <tr>
    <td>City</td>
    <td><input type="text" name="city" /></td>
  </tr>
  <tr>
    <td>ZIP code</td>
    <td><input type="text" name="zip" /></td>
  </tr>
  <tr>
    <td>State</td>
    <td><input type="text" name="state" /></td>
  </tr>
  <tr>
    <td colspan="2"><input type="submit" value="save" /></td>
    <!-- colspan means, this column should span over 2 columns, it counts double in this case -->
  </tr>
</table>

Polemos

United States160 Posts

August 09 2011 15:22 GMT

#13

Ahhhhhhhhhhhhhh!! I understand ! Thank you all very much!

Trowabarton756

United States870 Posts

August 09 2011 15:45 GMT

#14

Basically bra when i looked at your page it was fine in firefox, but you gotta understand that just because the code works in 1 browser doesn't mean it will work in another(i assume you're looking at this in IE or another browser) so make sure to check it in as many browsers as you can to make sure the code properly works.

Marou

Germany1371 Posts

August 09 2011 16:58 GMT

#15

i wouldn't recomend using tables for your layout, but rather use div and css to have boxes layed out the same way as a table does it. That's just my opinion tho, many people still use tables, but if you are serious about html/css you shouldn't rely on them to much.

aike

United States1629 Posts

August 09 2011 17:34 GMT

#16

On August 10 2011 01:58 Marou wrote:
i wouldn't recomend using tables for your layout, but rather use div and css to have boxes layed out the same way as a table does it. That's just my opinion tho, many people still use tables, but if you are serious about html/css you shouldn't rely on them to much.

This exactly. Tables are supposed to be for tabular data. Like say you want to display the results of all info that has ever been submitted with the current from, you'd want it to be laid out like a spreadsheet. But for actual page formatting you should use CSS + Divs and other HTML elements. With CSS you can position things anywhere you want on the page, you aren't stuck with the constraints of a table.

And to Trowabarton756, that isn't completely true. These days as long as you are using proper CSS and HTML your pages should look the same in all browsers. I haven't had any issues with different stuff in different browsers in a long time.

KeksX

Germany3634 Posts

August 09 2011 17:59 GMT

#17

On August 10 2011 00:19 Morfildur wrote:

Show nested quote +

You can have as many as you want, you should just always have the same number of <td>s in all <tr>s of the same table.

Not (100%) true, you can just use colspans !

Integra

Sweden5626 Posts

August 09 2011 18:08 GMT

#18

I just read your code, why are you using CSS when you clearly aren't using it? Your form should not be formatted through tables, since you are using CSS. Just setup the form using the List tag and then format it with CSS.

SarR

476 Posts

August 09 2011 18:16 GMT

#19

I strongly recommend that you do not use tables to arrange HTML elements. It could get real ugly for you should you decide to make changes later. Tables are so 1995

Use CSS instead to arrange your elements. Id even go so far as to say that tables are unnecessary in this age. CSS is the way you should be going.

Edit:
Could you provide a screenshot of what you expect your HTML form to look like and id make some time to to recreate it using CSS as an example for you.

KeksX

Germany3634 Posts

August 09 2011 18:20 GMT

#20

On August 10 2011 03:16 SarR wrote:
I strongly recommend that you do not use tables to arrange HTML elements. It could get real ugly for you should you decide to make changes later. Tables are so 1995

Use CSS instead to arrange your elements. Id even go so far as to say that tables are unnecessary in this age. CSS is the way you should be going.

Edit:
Could you provide a screenshot of what you expect your HTML form to look like and id make some time to to recreate it using CSS as an example for you.

"to break a butterfly on a wheel"

He needs a table. He makes a table. :3

1 2 Next All

Please or register to reply.

HTML Help

Completed

Ongoing

Upcoming