Div around contact form

Hi ron!

I’m sorry but I do not understand the question. Which cells are you talking about, please? Which are cells 1?

i show you with an image and i think not just to the first cells(1)width i think it is affected from the all table

That line removes the 10px of padding from the first cell, the label cell, in the .button row. It is till in your code so the words are wrapping. It would have been much better had I set the width of the right column to 1px. That extra line of CSS would not have been needed.

is it not because there is no non-breaking code that is in the words of the first cell ? and why it removed the 10px padding that i have?

thanks galia

It only removed the 10px padding from .button td:first-child, the right cell in the button row. Nothing else.

Changing the width of one cell changes the width of other cells in the table. Remember, that the height of a row is determined by the tallest cell, and the width of a column is determined by the widest cell. This table has a fixed width so the width of the cells interact. I tried to make sure the right column would be the width of the two words so the fields in the left column would be a wide as your code permits. In other words, the behavior that you see and the need for the non-breaking space is intentional. I made a mistake when I did not set the width of column 1 to 1px.

If you put the non-breaking space between the two words in row 1 cell 1 (the right cell), the two words will not wrap.
The two words are wrapping because the width of row 1 cell 1 is too narrow for both words. If you add the non-breaking space between the two words in row 1 cell 1, they will not wrap and the width of the cell will stretch to fit the two words…

Hi ron!

It only removed the 10px padding from .button td:first-child, the right cell in the button row. Nothing else.

so i have to fix it or it is like that?

and thank you i understand the two answers that you have gave me after the first question/answer

galia

I am not sure what you code looks like right now, so I am hesitant to say “yes” or “no”.

However, I do not think that you understand how HTML tables behave. I think what you “learned” in your class is how to push buttons in Dreamweaver, but not how the HTML is structured and how it behaves.

If you are willing to spend a few days writing table code, I will be glad to help you really learn how they are build and how they work. It will not be a complete tutorial about tables, but it should cover most of the basics. It will be focused on helping you understand how the table that holds your form works. Are you interested?
The only thing that I ask is that you write the code yourself. I will send you the code and you write it into your Dreamweaver file by hand. Do not use any Dreamweaver commands or easy-buttons. It is important that you see how the code works first hand.

Hi ron!

I am not sure what you code looks like right now, so I am hesitant to say “yes” or “no”.

here is the code right now

contact2.html (6.2 KB)

However, I do not think that you understand how HTML tables behave. I think what you “learned” in your class is how to push buttons in Dreamweaver, but not how the HTML is structured and how it behaves.

maybe you’re right i do not learned that much on tables i am not a computer Programmer.

If you are willing to spend a few days writing table code, I will be glad to help you really learn how they are build and how they work. It will not be a complete tutorial about tables, but it should cover most of the basics. It will be focused on helping you understand how the table that holds your form works. Are you interested?
The only thing that I ask is that you write the code yourself. I will send you the code and you write it into your Dreamweaver file by hand. Do not use any Dreamweaver commands or easy-buttons. It is important that you see how the code works first hand.

yes i do not mind to learn for my knowledge and know how to fix my errors if they be

thanks galia

Galia, a person does not need to be a computer programmer to write a web page. HTML and CSS are interpreted languages, not compiled. Most definitely not computer programming .

Good, because the goal of the “lesson” is to help you understaned how table code and related CSS works so you can learn how to analyze something that is not working the way you expect it to work and hopefully code a good solution.

Although we are talking primarily about tables right now, these evaluation techniques, ideas/concepts, can be applied to all of your code writing and will help you understand your code.

Tables pt.1 - Rules, Defaults

This first page lists a few very basic “rules” of table behavior that are common to all tables. It is important that you recognize (memorize) and understand these basics facts. If you do not understand any of them, try to find more information on the internet or ask in your next post. The page continues with examples of the default padding in tables and how to change it. I would like to be sure that you understand that tables have some default padding, how that default padding affects the tags, and why people sometimes “reset” that default padding to zero.

Open this file in your browser. I believe it will take about 20 minutes to read and work through the examples in a new file using the code editor in Dreamweaver.

tables-pt1.html (14.5 KB)

Ron, before i do the exercise i read a little bit what you write and you want me to work with html5 that i did not learn on why is that? and did i have to change on the properties the doctype that i am write on and for knowledge what is really means default page padding and etc?

thank you galia

I used the HTML5 doctype because it is easy to write and it makes no difference to the table code. We are focussing on the table code, not the doctype.

The default padding is in the table code, not the page structure.

I am trying to make this simple and easy.

ok thank you about html5 i work on it and tell you about it tomorrow and if i have a question i tell you but what i mean in default is in general and i was putting an examples in padding in a page what does it means that what i meant?

Many HTML tags have specific properties assigned to them by default.

(If you look at a “reset stylesheet” you might be able to envision the magnitude of what I am saying.)

In this first part about tables, I introduce you to the padding properties that are part of table code by default.

If the “lesson” is confusing, then your questions will help me rewrite it better.

“Default” is what happens unless you do something to change it. So if you set an <h1> heading in your page, for example, but don’t give it a particular style or size in your CSS, it will display at the browser’s default size for an <h1> heading.

If you are having problems with some gadget - perhaps your mobile phone or your router - there is often an option to “reset factory defaults”. That means going back to the way it was at first, before you set it up to suit yourself.

Does that help?

2 Likes

Thank you very much TechnoBear i more understand now it helps :smile:

1 Like

Thanks, @TechnoBear. Sounds like I misunderstood the question.

Galia, I came up with a couple of dictionary-style definitions for “default” to add to this topic:

(1). An option that is selected automatically unless an alternative is specified.

(2). (computing) Assume a particular value when none other is specified.
“If you do not specify a color, text defaults to black.”

If English is not clear, perhaps you can run the text through google translator.

The concept of tags/elements having “default values” is one of the most basic things you should have been taught during the first week of class.

Hi ron!

Thanks, @TechnoBear. Sounds like I misunderstood the question.

Yes, ron sorry

(1). An option that is selected automatically unless an alternative is specified.

(2). (computing) Assume a particular value when none other is specified.
"If you do not specify a color, text defaults to black.

Thank you very much for your extra explanation it make me more understand

If English is not clear, perhaps you can run the text through google translator.

i am using google translator but also i know english for hearing and from school so i take from that because google translator not that accurate

The concept of tags/elements having “default values” is one of the most basic things you should have been taught during the first week of class.

maybe i learned that but i don’t remember i just work on my site and i do not have over my material of the course

and about the exercises that you send to me sorry i did not send the question or what i did yesterday i hope today i will send it.

thank you galia

So ron here are the questions:

  1. 5.By default, tables hug their content. (hug = shrink to fit)

about that if there is a content in the tables like fonts/'words the fonts are in the same size or on the same row

  1. 7.The table attribute border=“1” adds a 1px border around each cell and around the table. (These 2 colored borders create the 3D box look.)

what do you mean about the table attribute border =“1”

3)Yet, the dimensions of this red table are 10px wide by 6px high

it is not look in this size how come?

4)It was that 2px of cellspacing between the table cells (td tags)

it does not look that is a space betwwen the cells

  1. after did in the first time cellspacing=“0” cellpadding=“0” antil the end of this exrsise did i have to leave it like that?

6)about <tbody> why you need this code and what was before that?

  1. what is firebag?

here what i did is it enough copies

tables-pt1-2.html (338 Bytes)
tables-pt1-1.html (152 Bytes)

thanks galia

The last line of the exercise says that we will talk about content in part 2. We will talk about content within table cells if we get to part 2.

There are two (2) lines in your code where you write <table border="0". (There used to be many more instances when you had nested tables.)

  <div id="tab">
    <table width="940" border="0" ...

      <form action="mailto:fgm4488@gmail.com" method="post" enctype="text/plain" name="form1" id="form1">
        <table width="250" border="0" ...

I assumed that you do not know why you have this attribute in your table code and that you do not know what happens if you change the border attribute from “0” to “1”; so, because I am talking about the default properties of tags/objects, I showed you an example in which borders add to the size of a container. Using a small table and table cell makes it easy to see that the table boxes become larger when the borders are added.

I don’t know. How are you looking at it? What browser are you using? Perhaps you are not writing the code exactly as it is shown. I tested it in Firefox and Chrome and it worked for me. If something does not appear the way I say it should appear, it is a good idea to include a screen shot so I can see what you see.

What does it look like to you? Again, a screen shot might help, because the code has been tested in Firefox and Chrome. Perhaps you are not writing the code exactly as it is shown.
Your hand written code should render exactly like the image in the exercise… assuming you are looking at the exercise in a real browser.

That code was demonstrated just after the middle of the exercise, so it should have been deleted. Again, I remind you that the code is written as visible text along with each step in the exercise. There should be absolutely no way to go wrong.

Perhaps I was not clear about the <tbody> tag. It exists in the code whether you write it or not. (You should write it, though.)

Firebug is a developer’s plug in for Firefox. I find it easy to use and informative. I forgot that you do not have Firebug installed in your copy of Firefox. It would be a very good idea if you installed it.

The code “copies” tell me that you did not write your master file exactly as I asked you to. I asked that you write your code by hand and I gave you the code to write, including the indents. It looks like you copied you code from another page and edited it to work in the “master” file. It is not the code that I sent you in the exercise. It looks like you “did it your way” instead.

I recommend that you open the file that I sent in your favorite browser and read it again. As you read it, create a master file for the exercises that looks exactly like the code that I asked you to write. Then work through the steps again.

Hi ron!

I don’t know. How are you looking at it? What browser are you using? Perhaps you are not writing the code exactly as it is shown. I tested it in Firefox and Chrome and it worked for me. If something does not appear the way I say it should appear, it is a good idea to include a screen shot so I can see what you see.
What does it look like to you? Again, a screen shot might help, because the code has been tested in Firefox and Chrome. Perhaps you are not writing the code exactly as it is shown.
Your hand written code should render exactly like the image in the exercise… assuming you are looking at the exercise in a real browser

that is what i look

That code was demonstrated just after the middle of the exercise, so it should have been deleted. Again, I remind you that the code is written as visible text along with each step in the exercise. There should be absolutely no way to go wrong.

ok but you did not say in the exercise to delete it after i did that

The code “copies” tell me that you did not write your master file exactly as I asked you to. I asked that you write your code by hand and I gave you the code to write, including the indents. It looks like you copied you code from another page and edited it to work in the “master” file. It is not the code that I sent you in the exercise. It looks like you “did it your way” instead.

i write it by hand but also there is automatic code in dreamweaver for what you wrote
this is the master file
tables-pt1-1.html (152 Bytes)

tell me after that if i have to do it again

thanks galia

You are correct that I did not specifically tell you to delete those <table> attributes. Instead, in the next step, I explained that those <table> attributes were outdated and should be replaced with CSS equivalents. I then showed you the equivalents and where to code them. The accompanying visible text shows the CSS properties and no longer shows the <table> attributes because the <table> attributes were replaced with the CSS properties.

The visible text in the exercise file shows how your code should look in each step.

The small red box shows that the code renders exactly the same when using the CSS properties as it did when using the table attributes.

I asked you to write the code yourself. Please TURN OFF automatic code in Dreamweaver. Delete the “master file” that you have created and write a new one. Make your code look exactly like the code in the exercise page, including the indents.

ok ron thank you i do it again maybe the code look different because i open it with dreamweaver
and do i have to do more than one copies to the master file?
galia

The idea of having a master file (a very basic framework) is so one can make copies of that master file and use them again and again. Only one master file is needed. After that, you can make a copy and add your code to it. You can even change the values of some of the properties or attributes and see what happens. Experiment ! If you make a mess, you can make another copy of the master file and start again.