Div around contact form

Use table-tester6.html. It is attached at the bottom of message number 586.

Open it in your browser.

Edit it with Dreamweaver.

Thank you ron i get it but i meant to use this Instructions file what file code to use is it is it from the latest exercises that i did?

thanks galia

Hi, Galia.

In message number 585, three of your questions ask about default table size:

My message number 586 was an attempt to answer your questions.

Because these three questions are so similar, I felt that the answers to these three questions deserved more explanation so I created table-tester6.html as a NEW exercise that talks about default values only and how to experiment and find out what the default values are. I mean for you to do the experiments in table-tester6.html using table-tester6.html.

table-tester6.html is a NEW exercise that attempts to answer your questions about defaut values from message number 585. Please work table-tester6.html like a NEW exercise.

(FYI: The code for table-tester6.html came from the section “Start a new table”. I made three copies of the HTML content and added attributes to one copy and CSS styles to the third copy for the experiments in the NEW exercise. I did that so you can see 3 tables in your browser at the same time and compare the tables in your browser.)

Please work table-tester6.html like a NEW exercise.

So ron to be sure i build the exercise on the “start a new table” is that right?

thank you galia

If you wish to start from the code in the “start a new table” section, you can.

The “table-tester6.html” file saves you the trouble of writing it yourself. However, you can certainly write it yourself if you prefer.

An advantage of using the table-tester6.html file is that you can give your attention to the goal of understanding HTML default values and not have to work so hard to make your HTML file look like the table-tester6.html code.

ok thanks ron
galia

Hi ron!

I want to ask you what i have to do on part 1 do i have to give the table a size or it is just an explanation (my file look now like in “start a new table”)

thank you galia

Why are you asking about part 1? We finished tables-pt1.html 3 weeks ago and started tables-pt2c.html. (ref. message #579)
Why are you worried about “start a new table” from pt2? We can return to it later, if you wish. Right now, you should be working the experiments in table-tester6c.html that I posted at the bottom of message #586.

In message #585 you asked several questions about tables-pt2c.html.

In message #586 I answered your questions and ADDED a NEW EXERCISE in an attempt to help explain about table default values.

You have not yet worked the exercises in table-tester6.html. That is the file that you should be working on now. The instructions for working that file are included in the text within that file. They reinforce the last answer that I gave you in message #586.
I repeated in message #592 that you should be working table-tester6.html.

You should be working the experiments in table-tester6.html.

Sorry ron if i was not making it clear i meant part 1 of the experiments of table-tester6.html

thank you galia

table-tester6.html is the worksheet that you should be editing.
The instructions on the page say:

(1) The top table is the table with no code to give it any size. It will be the Reference table because we will make no changes to it.

(2) The second table has HTML table attributes cellpadding=“” and cellspacing=“”. However, those attributes contain NO values. Your job is to add numbers (values) to the “cellpadding” and “cellspacing” attributes in the HTML until that table looks like the Reference table. Warning: If you start with zeros, the table will disappear. :smile:

(3) The bottom table has been give a classname of “test”. The CSS rules .test {border-spacing:;} and .test td {padding:;} appear in the CSS at the top of the page. Your job is to add values in pixels (px) to the CSS properties until the bottom table looks like the Reference table. Warning: If you start with zeros, the table will disappear. :smile:

HTML attributes and CSS properties were covered in part 1 (tables-pt1.html). If you have problems applying values to the the HTML attributes or CSS properties in this exercise, please review part 1.

</instructions>

There is nothing to do in item 1 of this worksheet.
Items 2 and 3 instruct you to play with HTML attribute values and CSS property values.

Learn-by-doing. Learn what happens when you change them.

I don’t know how else to express it.

Every time you make one change, refresh your browser so you can see what that change does.

Thank you very much ron i got it now :smile:

galia

Ron i have just one more question about that do i have to do 2 tables or use the same one with css and html ( i just did one) and by the way i already did with the html i tell you all about it when i do with css
thanks galia

Hi, Galia.

In ther worksheet, there are three tables.
The top table is a Reference table and will not change.
You should change the middle table by adding values to the HTML attributes cellspacing and cellpadding.
You should change the bottom table by adding values to the CSS properties at the top of the page for .test td {padding:} and .test {border-spacing:}.

If you are creating individual pages for the tables then there will be two pages, one showing the middle table with its HTML attributes that you end up with and one showing the bottom table with the CSS declarations that you end up with at the top of the page.

If you work both exercises on one table, then the CSS values will override the HTML attributes ! :smile: That would defeat the purpose of these separate exercises because… the CSS declarations would override the HTML attributes.

These are supposed to be learn-by-doing exercises.
Try large and small numbers in the HTML attributes as well as the CSS properties and see how the tables behave. Please list some of the different values that you used and describe how the tables look with those different numbers. (While experimenting, you can use BIG numbers if you wish. :smile: )

Cheers,
Ron

1 Like

Hi Ron!

Here are the exercise that i did on html table:

1.tables pt2-test1.html (536 Bytes)
The cellpadding of the table look have small squares the padding is more thicker and is on the most of the table

2.tables pt2-test2.html (537 Bytes)
The cellpadding covers almost all of the table and the cellspacing is more thinner like a frame

3.tables pt2-test3.html (536 Bytes)
This table as equal values on the cellspacing and the cellpadding are divided i guess to that values

4.tables pt2-test4.html (537 Bytes)
In this table there is larger value of cellpadding and it is cover most of the table and the cellpadding quite small.

5.tables pt2-test.html (536 Bytes)
In this table there is the right values of the table that you did the default table you were right sorry if i am repeating on that why this values and not something else are the values of default table why is that?

Here are the exercise of the css table:

1.tables pt2-testcss1.html (590 Bytes)
In this table look like the default table small table but with thinner Cellspacing and cellpadding much larger

2.tables pt2-testcss2.html (592 Bytes)
In this table the border-spacing have the lower number of the border then the padding with a large number big cells and bigger table

3.tables pt2-testcss3.html (591 Bytes)
In this table i did border -spacing 0 and that did no border but i did padding and in this table you see just the padding green square

4.tables pt2-testcss4.html (592 Bytes)
In this table i did border spacing more larger than the padding most of the table is border spacing and smaller padding

And i notice that if you do html table the size of the files are more lower than css table why is that and what is should to choose to do html table or css table?

thank you ron i enjoyed to do the exercises i hope i did them well :smile:

galia

Hi, Galia.

I looked at your files and they look impressively good, very clean. It looks to me like you learned that if you change the cellpadding on a table cell, the size of that table cell changes. Of course, that means that padding contributes to the content inside of the cells. It also looks like you see that cellspacing affects the space or distance between all of the cells in the table.

Your file, “tables pt2-test.html”, deserves a grade of A+ because the numbers (values) that you added to the HTML cellpaddng and cellspacing attributes made the table look exactly the same as the table that has no values assigned to cellpadding and cellspacing. I hope you understand that you have shown how one can find the default values for table cellpadding and cellspacing by substituting actual values as your did. If you understand this, then you have accomplished a lot and this first part has been a successful exercise!!!

The second set of tables that use CSS look good, but do not have a table that looks the same as it does without CSS values (like the “reference” table). Can you do the same thing with CSS properties that you did with the HTML table attributes and find out what CSS values will make the table look the same as it does with NO CSS values assigned (like the “reference” table)?

Please make one more table that uses CSS properties and fill in values that make it look the same as it does without any CSS values (just like the “reference” table).

Cheers!

2 Likes

I apologize, Galia, I forgot to reply to this question.

Please use the worksheet, table-tester6.html, and show me what you are asking. That worksheet includes code for a table with HTML attributes and a table with code for CSS properties so you can put both on the same worksheet. After you fill in the numbers, just send the file back to me in a message.

I apologize, Galia, I forgot to reply to this question.

It is ok ron but i meant that the size of the files like you can see in #603 for instance the first file size is 536 bytes and the first css table file is 590 bytes why the css is heavy than html table and what you recommended in a site to put that the site will not be heavy if it can be heavy to a site put an html table or css table?

and i can see you did not answered that question also sorry

sorry if i am repeating on that why this values and not something else are the values of default table why is that?

and i will answerd soon i hope about #604

thanks galia

Hi ron!

Please make one more table that uses CSS properties and fill in values that make it look the same as it does without any CSS values (just like the “reference” table)

Is that what you mean (see the file) and what you mean without css values is it an html values?

here is the file:

tables pt2-testcss5.html (590 Bytes)

thank you galia
.

Yes, that is perfect! You can see that these CSS values are the same as the HTML attribute values in your file tables pt2-test.html and both sets of values make the table look exactly like the “reference” table which has NO CSS or HTML attribute values assigned, only its default properties/values give it any size.

You asked how I knew what the default values of a table were. This is how I discovered them. I experimented by substituting values in my “test” table until it looked like the “reference” table where nothing is assigned. When they looked alike, I had found the table’s default values.

Does that make sense?
Do you understand that you can find many default properties by substituting values this way.
Do you see that this knowledge helps you design the layout of a page? You now see how padding affects table cells and how border-spacing affects tables.

I meant like the “reference” table, with only the default properties affecting it, and without any properties or attributes manually assigned.

I see. Comparing one table with HTML attributes and one table with CSS properties gives the impression that CSS creates a larger file. If you had one file with 5 HTML tables styled with identical HTML attributes and one file with 5 tables styled with identical CSS, then the size would favor the CSS page because the CSS would not need to be repeated for each table whereas the HTML attributes must be repeated for each table. Normally, the CSS would be written on an external stylesheet so it would not be on the HTML page, plus CSS is a far more powerful and flexible way of styling the layout of a page, CSS is the way to go. HTML attributes are used primarily when there is no direct CSS equivalent for them. This size difference is not important. The power to design beautiful pages gained from using CSS offsets any size difference.

I’m not sure what you are asking, but if you are asking why these exact values are given to a table as defaults and not some other values, it is because the people who wrote HTML thought those values were the best. I am not aware that they have ever been changed so they must have made a good decision.

Hope this helps.

2 Likes

Hi ron!

Thank you ron for your great explanation i understand now but i have to ask your opinion about the default table is the default values are the lowest values to see the table but you can start 1 padding and 1 cellpadding?

Your file, “tables pt2-test.html”, deserves a grade of A+ because the numbers (values) that you added to the HTML cellpaddng and cellspacing attributes made the table look exactly the same as the table that has no values assigned to cellpadding and cellspacing

First thank you very much to give me that grade i am not use to get grades like that so i grateful of that but i do not know what you mean when you said that the table has no values assigned to cellpadding and cellspacing when there is values in this file?

thanks galia