HTML and CSS Building HTML Tables and Introducing HTML5 Calendar Project HTML tables have a storied history on the Web. Championed as a Web design layout tool in the 1990s, they are now chiefly used for their original, intended function: the presentation of data. HTML tables can be used for all sorts of things ranging from structuring e commerce forms to the representation of scientific data or calendar dates. Editing tables and navigating the various rowspan or alignment issues that arise is notoriously tricky, but this exercise will put you through your paces. First, you'll use a table to create a calendar Put "learn HTML5" on your calendar. page for all your weekly happenings. Then, you'll tackle some hand coded table configurations that will make sure your table/building skills are solid. And on top of it all, you'll build your tables within an HTML5 page structure. In this exercise, you're expected to: Structure a basic HTML5 page. Create an HTML table to specification for a calendar page, structuring the data into table head, body, rows, and data cells. Apply header, paragraph, and unordered list tags to table content. Customize the table by adding width, colspan, align attributes and a banner image. Further customize the table design using padding, spacing, frame attributes, and background colors. Hand code six tricky table configurations. Project Brief Part I: A Date to Remember In this assignment, your task will be to transform and translate a string of dates into an HTML table based calendar layout. Take a moment to recap the essential table tags and attributes one more time with the following Review Kit: Assignments are evaluated for understanding
of concepts covered in the lecture. table thead and tbody tr th and td colspan and rowspan Table Tags and Attributes cellpadding and cellspacing The <table> tag pair is a container for all of the content and cells within the table. 00:00 Various / 00:00 attributes can be applied to the table, such as a border, width, or color. Starting out, you need to find a banner image 750 by 200 pixels in dimensions. Use your Photoshop prowess to create the perfect banner that reflects the calendar's content. For our sample calendar, we used this photo of California. You could make your calendar image scenic or make it a slice of your life. A camera phone would be a good way to gather source material for the graphic header. It's been a while since October 2012, but that was a big month in my life, so that's what we'll use for an example. But you should choose your own month and year to work with. Try picking your birthday month, or a significant month from your past or future! Enter a brief description of one activity in your life per calendar row (total of 5 rows), for example: Grandpa's birthday Buy a new car Vacation begins! Win the lottery Visit the dentist 1. Create an HTML5 page For this exercise, you are going to create an HTML5 page. Open up a new document in your text editor and input the following code to get it started. <!DOCTYPE html> <html lang="en">
<head> <meta charset="utf-8" /> <title> </title> </head> <body> </body> </html> Create a title for your page and enter it in the title tags, such as "Calendar." Make sure all data is inside the <body>tags. Use HTML5 <header>and <section>tags to separate out the page's headline graphic and the calendar section (month/year, days, and dates, which will live in a table shortly). Save and preview your document doesn't look like much, yet! 2. Define the table, table header, and table body. Begin building your calendar by first adding the <table>tags to the <section>tags of your document. The <table>tag defines the table as a whole. Remember that all of your other tags for the table (<tr>tags, for example) must live inside of the <table>tag. Give the table a one pixel border by adding the border attribute to the opening tag: <table border ="1" style="table-layout: fixed">. Note that the second attribute here is not one you should be familiar with yet. This is a style attribute that compensates for a bug in Internet Explorer 8. There are two header rows for the calendar. The first one will hold the month and year, and the second will hold the days of the week. Wrap the month, year, and complete list of days (Monday through Sunday) <thead>tags. The body of your table will be the 31 individual dates, so wrap the complete list of date numbers in <tbody>tags. 3. Define the table rows Next, add table row tags <tr>at the beginning (and end) of each table row. This tag wraps groups of individual table cells. The month and year should be your first row. Monday Sunday should be your second row. The dates 1 7 should be your third row, and so on. Make sure to close each tag! And remember, <tr>tags should be nested inside <thead>and <tbody> tags, like so: <thead><tr>october - 2012</tr>... 4. Define individual cells Use the <th>tags for each cell you want to designate a table header cell each cell with a day listed and the cell with the month/year. Use the <td>tags for each cell you want to designate a table data cell each cell with a date listed. Save and preview your work. If you've coded everything correctly, your calendar should look something like this:
And a fine thing it is, but let's keep working on it. We need to style the content and apply some formatting to the table. 5. Apply paragraph and list tags to content Next, we want the dates and the activities to be properly semantically identified. Let's wrap dates in <p>tags and make each activity an unordered list item, like so: <td><p>4</p><ul><li>iron my suit</li></ul></td> 6. Customize the table Did you notice that the month and year live in a cell, when we really want them to span the whole calendar? Let's fix this using the colspanattribute. Remember how to do this? Go to the cell that has the month and year in it. This is a <th>. In this <th>, you need to indicate how many columns you want to span: <thead><tr><th colspan = "7">October - 2012</th></tr> </thead> Add an <h1>to your month and year as well so it stands out from the other text in the calendar. Your calendar should look like this:
7. Add the banner image Let's exit the table for a moment and move back into the <header>of the document to add the banner image. Remember how to do this? <img src="images/calendar.jpg" alt="october photo " /> Since our image is 750 pixels wide, it would be nice if the table were the same width. So now return to your table and add a widthattribute to lock in your table to the width of the graphic: <table border="1" width ="750" style="table-layout: fixed"> 8. Set cell widths To even out column widths, you can apply % widths to each cell in your table header row, like so: <th width = "14%">Monday</th> Note: Because you have seven columns, five columns should be set to 14%, and two columns set to 15% (adding up to 100%). Below how the calendar looks at this stage:
9. Finishing touches Your basic calendar is all set. But I would encourage you to work further on the design: Experiment with applying cell spacing and cell padding to the table. Experiment with using background colors in the table cells to complement the calendar header and balance out the design (use your Photoshop color picker to figure out values for the background colors). Experiment with frame and border attributes to get the look you want. As a reminder, here's how these attributes can be applied to a table, row, or cell: <table border="2" bordercolor="#cccccc" frame="void" cellspacing="2" cellpadding="5">
<tr bgcolor="#eeeeee"> I would like to see what you come up with. Don't try to be a student who does the minimum. Have fun with the assignment. The more you do, the more you will learn. Part II: HTML Table Boot Camp The goal of this assignment is to get used to building HTML tables, by hand coding them. In later life as a Web designer, you may use WYSIWYG editors to quickly build HTML tables, but in the long term it's best to understand the code the software is generating. Using only hand coding, I would like to see you build these six tables: A table with 2 rows and 6 columns A table with 3 rows and 6 columns A table with 6 rows and 6 columns A table with 2 rows and 6 columns, incorporating table headers and caption elements A table with 3 rows and 6 columns, incorporating rowspan and colspan A table with 6 rows and 6 columns, incorporating table headers, caption, rowspan, and colspan elements Incorporate these tables on a single HTML document, and you may include any content you like (perhaps your own writing or graphics?). Be sure to provide a headline above the HTML table describing the number of rows and columns and attributes. When you are finished, be sure to upload assignments to your Web host and then submit the direct links to the Dropbox for evaluation. Grading Criteria: What your instructor expects you to do: Design an HTML table to specification for a calendar page, structuring the data into table head, body, rows, and data cells. Apply header, paragraph, and unordered list tags to table content and customize the table by adding width, colspan, and align attributes and a banner image. Further customize the table design using padding, spacing, and frame attributes and background colors. Demonstrate the ability to hand code six given tables involving different row/column configurations and colspan and rowspan elements. Demonstrate the ability to create accurate HTML5 code by hand, structuring the page and adding opening, closing, and nesting tags appropriately with a minimum of errors. Important reminder: Templates from HTML editing software
such as Dreamweaver are not allowed in this course. This is a course about learning the fundamentals of HTML and CSS, and hence we stick strictly to hand coding. Any assignments based off any kind of template (including Dreamwever templates) will receive a 0. How to Post: Once you're done, go to the Dropbox for this exercise and post links to both exercises with a brief comment. If you have a question before sending your completed exercise for grading, use the Send Mail area to contact your instructor. I look forward to seeing your work!