PDA

View Full Version : I need HTML help - Complete N00B ~ Table making troubles



Petoux
12th October 2006, 11:12 PM
Ok, here is what I need to do:

{EDIT: I added a little bit more, and images for more help at the bottom :/ }




Chamberlain Civic Center: The Chamberlain Civic Center of Chamberlain, Iowa, is int the process of designing a Web page to advertise it's events and activities. Stacy Dawes, the director of publicity, has asked you to create a Web page describing the events in February, which are shown in the following list. Ticket prices are provided in parentheses.

Every Sunday, the Carson Quartet plays at 1 p.m. ($8)

February 1st, 8 p.m.: Taiwan Acrobats ($16/$24/$36)

February 5th, 8 p.m.: Joey Gallway ($16/$24/$36)

February 7th - 8th, 8 p.m.: West Side Story ($24/$36/$64)

February 10th, 8 p.m.: Jazz Masters ($18/$24/$32)

February 13th, 8 p.m.: Harlem Choir ($18/$24/$32)

February 14th, 8 p.m.: Chamberlain Symphony ($18/$24/$32)

February 15th, 8 p.m.: Edwin Drood ($24/$36/$44)

February 19th, 8 p.m.: The Yearling ($8/$14/$18)

February 21st, 8 p.m.: An Ellington Tribute ($24/$32/$48)

February 22nd, 8 p.m.: Othello ($18/$28/$42)

February 25th, 8 p.m.: Madtown Jugglers ($12/$16/$20)

February 28th, 8 p.m.: Robin Williams ($32/$48/$64)

...

From the book:

2. At the top of the page, create a table with the following attributes:

The border size should be 5 pixels with a width of 100% of the page and a cell padding value of 10 pixels. The table should have a red border.

The rules value should be set to "none" and the fram value to "below".

The content of this table should be displayed in a re sans-serif font with a font size of 18 pixels. The bottom margin size of the table should be set to 20 pixels.

3. The first table cell should contain the inline image ccc.gif. The alternate text for this image should be "The Chamberlain Civic Center". The size of the image is 322 pixels wide by 144 pixels high.

4. The next four cells in the row should contain the text strings, "Home Page", "Tickets" , "Events", and "Facilities". Vertically align the contents of these cells with the bottom border of the cell. Horizontally align the contents with the cell's right border.

5. Below the table you just created, insert another table with the following attributes:

The table should float on the right margin of the Web page with a left margin of 5 pixels.

The table border should be 5 pixels wide. The color of the table border should be red AND pink. The cell padding value should be set to 3 pixels. The cell spacing value should be set to 0 pixels.

The contents of the table should be displayed in a sans-serif font at a font size of 0.7em on a white background.

6. Withing the table, create a column group spanning seven columns. These columns represent the seven days of the week in the calendar table. Set the width of the columns to 60 pixels and align the text in the column group with the top of each cell. (Hint: To set the width for each column in a column group, add the width attribute to the <colgroup> tag.).

7. Within the column group, assign the first column a background color of pink. Assign a background color of white to the next four columns, and assign a background color of pink to the last two columns.

8. In the table's first row, create a heading that spans seven columns. Insert the text "Events in February" centered horizontally within the cell.

9. In the table's second row, insert the following table headings: "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", and "Sat".

10. Enclose the first two rows of the table in a table head row group. Change the background color of this row group to black and the font color to white.

11. The next five rows contain the individual days for the calendar, each placed in a separate table cell. Format the dates as follows:

Display the day of the month on its own line, formatted with a boldface font.

if there is an event for that date, display the name of the event on one line, the time the event takes place on the second line, and the ticket price on a third line. Separate one line from another using the <br/> tag.

If the date is NOT in the month of February, use the back.jpg image as the cell's background.



~~~~~~~~~~~~~

Here is what I have so far, and I have NO IDEA how to go any further unfortunately.

I am very bad at making tables in HTML because I don't know how to do them properly.

:/

...




So it is easier to read:

<html>
<head>
<!--
New Perspectives on HTML and XHTML
Tutorial 4
Case Problem 3

February at the Chamberlain Civic Center
Author: Vegna
Date: October 16 2006

Filename: feb.htm
Supporting files: back.jpg, ccc.gif
-->
<title>February at the Chamberlain Civic Center</title>

<table border="5" width="100%"
cellpadding="10" bordercolor="red"
style="font-family: sans-serif; font-size: 18;
border-color: red; margin: 0 0 20 0"
frame="below" rules="none">
<thead>
<tr>
<td width="322" height="144" style="background-image:url(ccc.gif)"
alt="The Chamberlain Civic Center">
<td valign="bottom" align="right" style="color: red">Home Page</td>
<td valign="bottom" align="right" style="color: red">Tickets</td>
<td valign="bottom" align="right" style="color: red">Events</td>
<td valign="bottom" align="right" style="color: red">Facilities</td>
</tr>
</thead>
</table>
</head>

<body style="background-image: url(back.jpg); color: black">

<table border="5"
cellpadding="3" cellspacing="0"
style="font-family: sans-serif; font-size: 0.7em;
border-color: red; float: right; margin 0 0 0 0">
<tr>
<td colspan="7" width="60" style="background-color: pink">
<td style="background-color: white">
<td style="background-color: white">
<td style="background-color: white">
<td style="background-color: white">
<td style="background-color: pink">
<td style="background-color: pink">
</tr>

<tr>
<td style="background-color: pink">
<td style="background-color: white">
<td style="background-color: white">
<td style="background-color: white">
<td style="background-color: white">
<td style="background-color: pink">
<td style="background-color: pink">
</tr>

<tr>
<td style="background-color: pink">
<td style="background-color: white">
<td style="background-color: white">
<td style="background-color: white">
<td style="background-color: white">
<td style="background-color: pink">
<td style="background-color: pink">
</tr>

<tr>
<td style="background-color: pink">
<td style="background-color: white">
<td style="background-color: white">
<td style="background-color: white">
<td style="background-color: white">
<td style="background-color: pink">
<td style="background-color: pink">
</tr>

<tr>
<td style="background-color: pink">
<td style="background-color: white">
<td style="background-color: white">
<td style="background-color: white">
<td style="background-color: white">
<td style="background-color: pink">
<td style="background-color: pink">
</tr>

<tr>
<td style="background-color: pink">
<td style="background-color: white">
<td style="background-color: white">
<td style="background-color: white">
<td style="background-color: white">
<td style="background-color: pink">
<td style="background-color: pink">
</tr>

<tr>
<td style="background-color: pink">
<td style="background-color: white">
<td style="background-color: white">
<td style="background-color: white">
<td style="background-color: white">
<td style="background-color: pink">
<td style="background-color: pink">
</tr>

</table>

<p>
February will be another banner month at the Chamberlain Civic Center with a
two day performance of the Tony Award winning musical, <i>West Side Story</i> by
the Broadway Touring Company. Tickets are going fast, so order yours today.</p>
<p>Celebrate Valentine's Day with the Chamberlain Symphony and their special
selection of classical music for lovers. The next day, exercise your mind by
attending the Charles Dickens mystery, <i>Edwin Drood</i>.</p>

<p>Jazz lovers have a lot to celebrate in February with a visit from <i>The Jazz
Masters</i> on February 10th, and then on February 21st, enjoy the music
of The Duke with <i>An Ellington Tribute</i> performed by the Jazz Company of
Kansas City.</p>

<p>Pins, bottles, plates, and chairs are flying at the Chamberlain Civic Center
in February. The <i>Taiwan Acrobats</i> return with another amazing performance.
Then, on February 25th, the <i>Madtown Jugglers</i> get into the act with
their unique blend of comedy, juggling, and madness.</p>
<p>Enjoy a classical brunch every Sunday in February with music provided by the
Carson Quartet. Seating is limited, so please order your table in advance.</p>

</body>

</html>



...

I'm not sure how to go further, or for that matter, where to even start!!

:/

Ignore the <p> and the other stuff not mentioned, that's just part of the assignment that fits it all together that I added.

{The calander in the books picture starts in January 26 (Sun) and ends at March 1st (Sat) for reference.}

Most of it will be like "Wha?" becuase you don't have the image of what it should look like. Just forget about that, all I need is the jist to help me out or WHATEVER else you can think of.

Please help ANYWAY you can. The more info I get/have, the more it will help me.

Thanks, I really appreaciate it.

^.^

:D

~ Vegna

EDIT2:

What it's supposed to look like is on the bottom of the post:



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

EDIT 3:

I worked on it a lot more, and here is the current code I have now:

<html>
<head>
<!--
New Perspectives on HTML and XHTML
Tutorial 4
Case Problem 3

February at the Chamberlain Civic Center
Author: Vegna
Date: October 16 2006

Filename: feb.htm
Supporting files: back.jpg, ccc.gif
-->
<title>February at the Chamberlain Civic Center</title>

<head>
<table border="5" width="100%"
cellpadding="10" bordercolor="red"
style="font-family: sans-serif; font-size: 18;
margin: 0 0 20 0"
frame="below" rules="none">
<thead>
<tr>
<td width="322" height="144" style="background-image:url(ccc.gif)"
alt="The Chamberlain Civic Center">
<td valign="bottom" align="right" style="color: red">Home Page</td>
<td valign="bottom" align="right" style="color: red">Tickets</td>
<td valign="bottom" align="right" style="color: red">Events</td>
<td valign="bottom" align="right" style="color: red">Facilities</td>
</tr>
</thead>
</table>
</head>

<body style="background-image: url(back.jpg); color: black">

<table border="5" bordercolor="red" bordercolorlight="pink"
cellpadding="3" cellspacing="0"
style="font-family: sans-serif; font-size: 0.7em;
float: right; margin 0 0 0 5">

<colgroup span="7" width="60" align="top">
<col style="background-color=pink">
<col style="background-color=white">
<col style="background-color=white">
<col style="background-color=white">
<col style="background-color=white">
<col style="background-color=pink">
<col style="background-color=pink">
</colgroup>

<thead>

<tr>
<td colspan="7" style="color: white; background-color: black" align="center">Events in February</td>
</tr>

<tr>
<td style="color: white; background-color: black" align="center">Sun</td>
<td style="color: white; background-color: black" align="center">Mon</td>
<td style="color: white; background-color: black" align="center">Tues</td>
<td style="color: white; background-color: black" align="center">Wed</td>
<td style="color: white; background-color: black" align="center">Thurs</td>
<td style="color: white; background-color: black" align="center">Fri</td>
<td style="color: white; background-color: black" align="center">Sat</td>
</tr>

</thead>

<tr>
<td align="left" valign="top" style="background-image: url(back.jpg)"><b>26</b></td>
<td align="left" valign="top" style="background-image: url(back.jpg)"><b>27</b></td>
<td align="left" valign="top" style="background-image: url(back.jpg)"><b>28</b></td>
<td align="left" valign="top" style="background-image: url(back.jpg)"><b>29</b></td>
<td align="left" valign="top" style="background-image: url(back.jpg)"><b>30</b></td>
<td align="left" valign="top" style="background-image: url(back.jpg)"><b>31</b></td>

<td align="left" valign="top" style="background-color:pink"> <br><b>1</b></br> <br>Taiwan</br>
<br>Acrobats</br> <br>8 p.m.</br> <br>$16/$24/$36</br></td>
</tr>

<tr>
<td align="left" valign="top" style="background-color: pink"> <br><b>2</b></br> <br>Carson</br>
<br>Quartet</br> <br>1 p.m.</br> <br>$8</br></td>

<td align="left" valign="top" style="background-color: white"><b>3</b></td>
<td align="left" valign="top" style="background-color: white"><b>4</b></td>

<td align="left" valign="top" style="background-color: white"> <br><b>5</b></br> <br>Joey</br>
<br>Gallway</br> <br>8 p.m.</br> <br>$16/$24/$36</br></td>

<td align="left" valign="top" style="background-color: white"><b>6</b></td>

<td align="left" valign="top" style="background-color:pink"> <br><b>7</b></br> <br>West Side</br>
<br>Story</br> <br>7 p.m.</br> <br>$24/$36/$64</br></td>

<td align="left" valign="top" style="background-color:pink"> <br><b>8</b></br> <br>West Side</br>
<br>Story</br> <br>7 p.m.</br> <br>$24/$36/$64</br></td>
</tr>

<tr>
<td align="left" valign="top" style="background-color: pink"> <br><b>9</b></br> <br>Carson</br>
<br>Quartet</br> <br>1 p.m.</br> <br>$8</br></td>

<td align="left" valign="top" style="background-color: white"> <br><b>10</b></br> <br>Jazz</br>
<br>Masters</br> <br>8 p.m.</br> <br>$18/$24/$32</br></td>

<td align="left" valign="top" style="background-color: white"><b>11</b></td>
<td align="left" valign="top" style="background-color: white"><b>12</b></td>

<td align="left" valign="top" style="background-color: white"> <br><b>13</b></br> <br>Harlem</br>
<br>Choir</br> <br>8 p.m.</br> <br>$18/$24/$32</br></td>

<td align="left" valign="top"style="background-color: pink"> <br><b>14</b></br> <br>Chamberlain</br>
<br>Symphony</br> <br>8 p.m.</br> <br>$18/$24/$32</br></td>

<td align="left" valign="top" style="background-color: pink"> <br><b>15</b></br> <br>Edwin</br>
<br>Drood</br> <br>8 p.m.</br> <br>$24/$36/$44</br></td>
</tr>

<tr>
<td align="left" valign="top" style="background-color: pink"> <br><b>16</b></br> <br>Carson</br>
<br>Quartet</br> <br>1 p.m.</br> <br>$8</br></td>

<td align="left" valign="top" style="background-color: white"><b>17</b></td>
<td align="left" valign="top" style="background-color: white"><b>18</b></td>

<td align="left" valign="top" style="background-color: white"> <br><b>19</b></br> <br>The</br>
<br>Yearling</br> <br>7 p.m.</br> <br>$8/$14/$18</br></td>

<td align="left" valign="top" style="background-color: white"><b>20</b></td>

<td align="left" valign="top" style="background-color: pink"> <br><b>21</b></br> <br>An Ellington</br> <br>Tribute</br> <br>8 p.m.</br> <br>$24/$32/$48</br></td>

<td align="left" valign="top" style="background-color: pink"> <br><b>22</b></br> <br>Othello</br>
<br>8 p.m.</br> <br>$18/$28/$42</br></td>
</tr>

<tr>
<td align="left" valign="top" style="background-color: pink"> <br><b>23</b></br> <br>Carson</br>
<br>Quartet</br> <br>1 p.m.</br> <br>$8</br></td>

<td align="left" valign="top" style="background-color: white"><b>24</b></td>

<td align="left" valign="top" style="background-color: white"> <br><b>25</b></br> <br>Madtown</br>
<br>Jugglers</br> <br>8 p.m.</br> <br>$12/$16/$20</br></td>

<td align="left" valign="top" style="background-color: white"><b>26</b></td>
<td align="left" valign="top" style="background-color: white"><b>27</b></td>

<td align="left" valign="top" style="background-color: pink"> <br><b>28</b></br> <br>Robin</br>
<br>Williams</br> <br>8 p.m.</br> <br>$32/$48/$64</br></td>

<td align="left" valign="top" style="background-image: url(back.jpg)"><b>1</b></td>
</tr>

</tbody>
</table>

<p>
February will be another banner month at the Chamberlain Civic Center with a
two day performance of the Tony Award winning musical, <i>West Side Story</i> by
the Broadway Touring Company. Tickets are going fast, so order yours today.</p>
<p>Celebrate Valentine's Day with the Chamberlain Symphony and their special
selection of classical music for lovers. The next day, exercise your mind by
attending the Charles Dickens mystery, <i>Edwin Drood</i>.</p>

<p>Jazz lovers have a lot to celebrate in February with a visit from <i>The Jazz
Masters</i> on February 10th, and then on February 21st, enjoy the music
of The Duke with <i>An Ellington Tribute</i> performed by the Jazz Company of
Kansas City.</p>

<p>Pins, bottles, plates, and chairs are flying at the Chamberlain Civic Center
in February. The <i>Taiwan Acrobats</i> return with another amazing performance.
Then, on February 25th, the <i>Madtown Jugglers</i> get into the act with
their unique blend of comedy, juggling, and madness.</p>
<p>Enjoy a classical brunch every Sunday in February with music provided by the
Carson Quartet. Seating is limited, so please order your table in advance.</p>

</body>

</html>

~~~~~~~~~

Yet the problem is now that the table is taller and skinnier than the table in the picture, and the words/numbers are double spaced when they are supposed to be single spaced. The third problem is that the top image keeps repeating itself. The fourth and final problem, is that the numbers(dates) for the days listed that have something (i.e. "West Side Story") are not aligned in the top left hand side of the cells.

Other than those 4 problems, I fixed/got everything else. Any ideas on the 4 problems I have left to fix?

Thanks.

{The third attached picture is what mine looks compared to what it is SUPPOSED to look like in the second picture. Take note that the picture of the results is in black and white, this is because I wanted to save ink. The primary focus is just on the table size and spacing of stuff.}.

H2SO4
16th October 2006, 07:35 PM
1. break tags are wrong, like images and links there is no end tag and it is placed where you want to make the break, e.g.



blah blah blah<br/>
blah blah blah<br/>


That will cure all your problems except the image repeating. That may be corrected if you take the small table out of the head of the document, put it in the body where it belongs and remove the extra head tag.



<html>
<head>
<!--
New Perspectives on HTML and XHTML
Tutorial 4
Case Problem 3

February at the Chamberlain Civic Center
Author: Vegna
Date: October 16 2006

Filename: feb.htm
Supporting files: back.jpg, ccc.gif
-->
<title>February at the Chamberlain Civic Center</title>

<head>This should be an end tag

where's the body tag?

<table border="5" width="100%"
cellpadding="10" bordercolor="red"
style="font-family: sans-serif; font-size: 18;
margin: 0 0 20 0"
frame="below" rules="none">
<thead>
<tr>
<td width="322" height="144" style="background-image:url(ccc.gif)"
alt="The Chamberlain Civic Center">
<td valign="bottom" align="right" style="color: red">Home Page</td>
<td valign="bottom" align="right" style="color: red">Tickets</td>
<td valign="bottom" align="right" style="color: red">Events</td>
<td valign="bottom" align="right" style="color: red">Facilities</td>
</tr>
</thead>
</table>
</head>Why is this here?

<body style="background-image: url(back.jpg); color: black">Ah, here it is...
This should be above the first table tag.



your code should be between the body tags, not the head tags.

KingPhil
22nd October 2006, 03:52 AM
So you don't need anymore help?

H2SO4
26th October 2006, 11:45 AM
Well since it appears correctly in my browser (apart from the images which I don't have) after making the changes I wouldn't think so. But a thank you would have been nice. :)