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?
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…
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.
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
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.
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?
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.
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?
“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.
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.
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.
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)
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.