Sub-Contest: 20 Points: HTML Table

[Tyler]

This sub-contest is for the $1000 PublisherForums contest which runs from February 16th to April 1st.

To recap, the point system instructions and informations can be found at http://www.publisherforums.com/contest2/ (http://www.publisherforums.com/contest2/)

The prize is 20 points to the winner.

Deadline: Best accepted one to be accepted on a first-come, first-serve scenario.

The Contest

Our contest (http://www.publisherforums.com/contest2/) page has two tables: the Prizes table and the Point System table. As you can see, they are pretty basic and crude in visual appeal. They also appear quite different in MSIE and Firefox.

Your task is to:

1. Make both tables look identical in both MSIE and Firefox.
2. Make the data/text easier to read (For example, the Point System table's text in MSIE is clumped together and difficult to read).
3. Stylize the tables to better match with the PublisherForums theme and the contest's page.
4. Make sure all HTML and CSS is valid and clean code!

Don't try to be too funky - I'm more than fine with simple, but feel free if your imagination wanders.

Either upload your HTML files and link here or PM them to me.

Good luck!

[Mystic]

As, you said a very simple, text based table.

Table 1 (http://www.pallab.net/uploads/publishersforum/)
Validation : HTML (http://validator.w3.org/check?uri=http://www.pallab.net/uploads/publishersforum/) CSS (http://jigsaw.w3.org/css-validator/validator?uri=http://www.pallab.net/uploads/publishersforum/&warning=1&profile=css2)


Table 2 (http://www.pallab.net/uploads/publishersforum/point/)
Validation : HTML (http://validator.w3.org/check?uri=http%3A%2F%2Fpallab.net%2Fuploads%2Fpubl ishersforum%2Fpoint%2F&charset=%28detect+automatically%29&doctype=Inline) CSS (http://jigsaw.w3.org/css-validator/validator?uri=http://pallab.net/uploads/publishersforum/point/&warning=1&profile=css2)

Tested on Opera9, IE7 and Fx2.

[Tyler]

Great Mystic!

However, I'd need something a lot 'cleaner' or 'prettier' in terms of the actual display of the table. Also remember that it should blend in nicely with the rest of the page, in terms of colours, etc. You can even use images if you so wish.

Good job on the cross-browser compatibility and validation though. Keep at it.. might find yourself with an easy 20 points!

[Mystic]

Not, sure what you meant by cleaner.
But, I have modified my original submission to fit with the forum theme. I have used similar background colour and header image.

[Tyler]

Hi Mystic,

You're on the right track, but it still isn't a major change of what is currently being used. I'm looking for more of a significant visual change... for example, you're not limited to using the exact structure that it currently is. You're welcome to widen it, add a new column or row, etc.

Keep them coming guys!

[Mystic]

I am not sure, how can I add extra coloumn or rows with the given content, or change the looks drastically while making it fit with the forum theme!
Anyway, since you have already had a look at my work, I have decided to remove the original version from the server now. Instead, I have put an encrypted version up. It looks the same, however it doesnt validate (due to the encryption). If you decide to go with my design in future, tell me. I will put back the original valid and non-encrypted files.

[Tyler]

Hint: For example, in Table #2, why not add a new column for Requirements, and then widen the whole table a bit as well? It would help even out the long blobs of text...

[Mystic]

Ok. That wont take much time. So, done. Your table was about 730px wide. I converted my tables to 730px.

[Tyler]

I'm going to leave it to you to be adventerous and try some variants, but here are two more suggestions:

1. The text's aren't vertically alligned..
2. Try thinner borders..
3. The light blue inner border really doesn't look good against the outter border..

You're very close Mystic but just need to take it that next step! My biggest concern other than those listed above is to somehow make the reading of the table easier.. as in the text.. don't know how that could be managed though unless a smaller font was experimented with perhaps.

[Mystic]

I'm going to leave it to you to be adventerous and try some variants, but here are two more suggestions:

1. The text's aren't vertically alligned..
2. Try thinner borders..
3. The light blue inner border really doesn't look good against the outter border..

You're very close Mystic but just need to take it that next step! My biggest concern other than those listed above is to somehow make the reading of the table easier.. as in the text.. don't know how that could be managed though unless a smaller font was experimented with perhaps.

Ok. I will try to do it sometime when I am a bit free.

1. The text is currently centrally alligned (vertical allignment). Will change it to top allignment. I did it like this, as otherwise large spaces was appearing at the bottom of some blocks.

2. Inner border width is already very small. So, I presume you mean the outer darker border. Its currently 2px. I will reduce it to 1px.

3. Will put darker black borders, matching with outer border.

Current font is Verdana. Using a smaller font would make it harder to read.

[Andrew]

I'll be making one when I get home. :)