Building HTML Tables and Introducing. Tables on the Web

Transcription

1 HTML and CSS Building HTML Tables and Introducing HTML5 Building HTML Tables and Introducing HTML5 This lecture is a blend of the old and the new, exploring an old standby in HTML, as well as the latest innovations of HTML5. Originally devised to display data, HTML tables were used by Web designers of the 1990s (and beyond) as a way to lay out Web pages. Today, good designers do all of their layout with CSS (which we'll explore later in the course), and HTML tables are back to their first and best use: data representation. Learn what tables do best: display data. We'll explore the tags and attributes used to represent tabular data the kinds of facts and figures you see in an Excel document or on an e commerce price list. Learning to create HTML tables also teaches useful code writing skills, including accurate tag nesting. Once you've got your bearings in table creation, we'll switch gears to some of the latest news in Web design: HTML5. HTML5 builds on the HTML code you already know to add new features and usability. In this lecture, we'll look at how an HTML5 based page is structured, and later in the course, we'll add fancy HTML5 features. In this lecture, you can expect to: Learn the history and purposes of the HTML table in Web design. Learn how to accurately code an HTML table. Learn how to customize a table by modifying rows, columns, dimensions, spacing, borders, and background. Explore the purposes of HTML5. Learn how to structure a basic HTML5 document. Tables on the Web Anyone familiar with Excel or any other spreadsheet application knows about working with tabular data. Tables map out our personal budgets, beautify our calendars, and make sense of our most complicated statistics. Places Compadres Witches Misc Yellow Brick Road Scarecrow Glinda the Good Munchkins Emerald City Tin Man The Wicked Witch of the West Deadly Poppy Fields Behind the curtain Cowardly Lion The Wizard Flying Monkeys HTML, conveniently enough, is rich with tags and attributes to let you represent complex tabular data with great aplomb. In the first part of this lecture, we will cover how to use HTML to create and customize tables. The original purpose of the HTML table was to represent tabular data: facts and Brief HTML Table History Until recently, HTML tables were used not only to organize tabular data, but to create page layouts as well. Prior to the popularization of CSS techniques that allow you to create page layouts with elegance and ease, Web designers

2 figures! used tables to position and size sections of a Web page. Using tables for layout is not only semantically incorrect (as page layouts are not the intended purpose of tables), but they are inferior to modern CSS layout techniques. Recall the importance of separating content from presentation: using tables for layout purposes blatantly integrates presentation within the HTML content of a page. Tables are still occasionally used for layout, mostly by designers who don't know any better. We will not cover table layouts in this lecture. (It's just bad practice.) We will, however, cover CSS methods for page layout. We'll focus on the true purpose of tables: to display data. The tags and attributes we're going to learn in this lecture are as follows: Element Tags Attribute Value Table <table></table> Colspan colspan HTML tables were coopted by Web designers of the 1990s as a structure for page layouts. This practice has since become a no no and has been replaced with CSS for layout. Table head Table body <thead> </thead> <tbody> </tbody> Rowspan Align rowspan Table row <tr></tr> Width width Table header cell left, center, right, or justify <th></th> Border border, bordercolor Table data <td></td> Frame void, above, below, hside, vsides, lhs, rhs Caption <caption> </caption> Cellspacing cellspacing Summary <summary> </summary> Cellpadding cellpadding Scope scope Creating a Basic Table Let's examine a simple table on a Web page. Imagine we need to create a table that displays the price of different brands of tea for a client. Often you'll receive such information in an Excel or Word document like this: Table content delivered in Word format Download the lesson2 folder here, and open the tea.html file in the tea folder within. I've included the basic tags we learned in Lecture One but left the

3 table data without markup. Note that the text within the table tags may not appear in a browser or Dreamweaver Design view until the table code has been completed. (Please ignore the outrageous prices for tea; they have been exaggerated for the purposes of demonstrating table cell alignment later on!) Let's now look at how to create an HTML table for this data. We'll add these tags one at a time. Remember to always use closing tags. 1. Define the table: <table> The <table>tag defines the table as a whole. Create a one pixel border to the existing <table>tag by adding the border attribute to the opening tag: <table border="1"> 2. Specify the table head and table body: <thead> <tbody> When a table has a header such as a row of category names, add the <thead>tag to one or more rows as the table header, then use the <tbody> tag to wrap the table body (as distinct from the table header). 3. Define the table rows: <tr> The HTML table has a strict nesting structure: content is wrapped in data cells, which are wrapped in rows, which are wrapped in table body or table header tags. Next, add table row tags <tr>at the beginning (and end) of each table row. This tag wraps groups of individual table cells. First you define a row, and then you add the enclosed cells. (Note that no tag exists for a table column.) 4. Define individual cells: <th> and <td> Use the <th>tag for each cell you want to designate as a table header cell (here, this includes Item, Description, Price). This can be the head of a row or a column. The specific cell content should be enclosed in the tag. By default, browsers bold the text in header cells. Use the <td>tag for table data. It marks out individual cells in a table. Like the <th>tag, it wraps specific cell content. Done? In a browser, your table should look like this: There are no table column tags. Instead, table rows tags create each row. Click here to compare your code with mine. To review, the tag nesting structure of a table is as follows: 1. Table header <thead>and table body <tbody>tags go inside table tags <table> It's good practice to use table body and table header tags. 2. Table rows <tr>always go inside table header tags or table body tags as appropriate 3. Table header cell <th>and table data <td>tags always go

4 inside table rows 4. Cell data always goes inside table cell header <th>or table data <td>tags For example: Use <table border="1"> to create a onepixel border that makes the table visible. <table border="1"> <thead> <tr> <th>header row</th> </tr> </thead> <tbody> <tr> <td>data row 1</td> </tr> <tr> <td>data row 2</td> </tr> </tbody> </table> As you can see, making a basic table is pretty simple. But to see how versatile the HTML table really is, let's customize it. Customizing Tables Spanning Multiple Columns and Rows There may be instances in which you want to merge two or more cells together so that they span multiple columns or rows. For example, maybe your table header is a single cell that spans the columns below it like this: Wizard of Oz Places Compadres Witches Misc Yellow Brick Road Scarecrow Glinda the Good Munchkins Colspan or rowspan attributes can be used to make cells span several columns or rows. Emerald City Tin Man The Wicked Witch of the West Behind the curtain Deadly Poppy Fields Cowardly Lion The Wizard Flying Monkeys You can achieve this effect with HTML using the colspan and the rowspan attributes. <colspan> Apply the colspan attribute when you want a cell to span two or more columns. <rowspan> Apply the rowspan attribute when you want a cell to span two or more rows. Both the colspan and rowspan attributes take a number (the number of rows or columns to span) as a value. For example, <tr colspan="3">or <th rowspan="3">. Let's try it out. Say we wanted to add a column to our table that categorized the types of teas listed, dividing them into black and white teas, like so:

5 Item # Description Price Black Teas A01 Darjeeling $28.00 A02 Breakfast Tea $ Add the colspan or rowspan attribute to the table cell in which you wish the span to begin. A03 Earl Grey $2, White Teas A04 White Tip $8.50 To do this, add an extra table header tag at the beginning of the first of the three rows you want to span. The value "3" indicates that it will span three rows. <th rowspan="3">black Teas</th> <td>a01</td> <td> Darjeeling </td> <td>$128.00</td> Also remember to add an empty cell at the top left and an additional table header tag for "White Teas": <tr> <th>white Teas</th> <td>a04</td> <td>white Tip</td> <td>$8.50</td> </tr> It is rendered like so: Colspan or rowspan are tricky to visualize and easy to mess up at first. Setting Alignment You can set the alignment for content in a cell or row using the align and valign attributes. Align sets the horizontal alignment of a cell, and takes one of four values: left, center, right, or justify. Try right aligning the numbers in the "Price" column. Edit each cell like so: <td align="right">$28.00</td> Next, try to center all the elements in a row: <tr align="center"> Use attributes Valign sets the vertical alignment for a cell or row. It takes one of four

6 to align the content in table cells or rows. values: top, middle, bottom, or baseline (in which the first line of text in the cell shares a common baseline with the other cells in the row). Here, the text in the left cell will sit at the top of the cell: <th rowspan="3" valign="top">black Teas</th> Below, we've adjusted the table so that the cells in the first column are vertically aligned to the top, and the cells in other columns are aligned to the center: Fluid vs. Fixed Tables Specifying the width of a table cell or row as a pixel value can give it fixed dimensions. Using a percentage value can make the table fluid. Thus far, our HTML tables have sized to the width of the content inside them. If you need a different size, you can define the width of a table, or an individual column, using the width attribute. The attribute can take a number or a percentage as a value. Add this attribute to the table tag to make your table 200 pixels wide: <table border="1" width="200"> You can also define the width of a column by applying a width to any cell in that column: <td width="50">darjeeling</td> Note that the entire column will be 50 pixels wide, not just that one cell. Both of these examples demonstrate the creation of a fixed table. A fixed table is one that has a determined width, regardless of the size of the browser window. Alternatively, you can create a fluid table, where the width of the table shrinks or stretches with as the browser window changes size. Create a fluid table by using percentages for the width value: <table border="1" width="75%"> You will end up with a table that is 75% the width of the browser window:

7 Borders and backgrounds can be applied to tables to affect the presentation. You need not use only "Web safe" colors in your page designs; almost every Web user has a screen that can display millions of colors. But the Websafe colors do offer a good starting point in your color selection. As the browser window stretches and shrinks, so will the table: If you set a column to, say, 50%, then that column will be 50% of the total table width. Try it! The advantage of the fluid layout is that it makes ideal use of screen real estate, and prevents the user from having to horizontally scroll in case the table is wider than the browser window. The disadvantage to this method is that it may present the table in a way that is not ideally readable (if the table is smooshed very narrowly or stretched very wide). Adjusting Borders and Background Our table is legible enough, but it still looks a bit stark and boring. Let's adjust some of the aesthetic elements to make it look a little better. First, let's change the borders and frame. By default, tables are displayed without frames, though we've already added a 1 pixel border to delineate the cells more clearly. Let's make our border 2 pixels thick and also change the color to a light gray: <table border="2" bordercolor="#cccccc"> The border attribute takes a number as its value (indicating how thick it is, in pixels), while bordercolor takes a hexadecimal color as its value. Hexadecimal colors are six digits or letters that indicate a specific color to your HTML or CSS. The cccccc you see above, after the pound sign, is a shade of light gray. A chart of the most common or "Web safe" colors can be found here via december.com, and more colors can be found here on Wikipedia. You'll notice that some colors can also be represented with three digits or letters (#ccc), or with a word indicating the color name, such as black or gray. It's recommended that you stick with white, gray, and black as you build your tables until you get more comfortable with designing. Let's remove the "frame" that surrounds the entire table:

8 <table border="2" bordercolor="#cccccc" frame="void"> Now our table looks like this: Cellpadding and cellspacing attributes give the table content breathing room. Adjusting Spacing Now, let's change some of the spacing in the table. There are two relevant attributes: cellspacing, which determines how much space there is between cells, and cellpadding, which determines how much space there is between the border and the content of the cell. Here is our table with 10 pixels of cell spacing: While here, we've added 10 pixels of cell padding: But for the purposes of our table, we are going to set the cellspacing to 2, and add a bit of padding (5 pixels): <table border="2" bordercolor="#cccccc" frame="void" cellspacing="2" cellpadding="5"> The table still looks a little dry. Let's add some color. You can add a background color to the entire table, or any row or cell using the bgcolor attribute. This adds a light gray color to a table row: <tr bgcolor="#eeeeee"> This adds the same color to a row header cell. <th rowspan="3" valign="top" bgcolor="#eeeeee"> Black Teas</th> If we add a background color to our header row and header cells, we get the following:

9 Notice here, and whenever working with bordered tables and table backgrounds, that the result may be a little different depending on the browser. The above result comes from Firefox, while the result below comes from Safari: This makes our headers stand out a bit more. To wrap the tea site up, let's add a quick CSS document I've created, which will format our text and other visuals: <head> <title>online Ordering</title> <link rel="stylesheet" type="text/css" href="css/tea.css"> </head> Ready to review the process of creating and customizing HTML tables? See it happen from start to finish in this video tutorial:

10 Creating HTML Tables Tables can be nested within tables, though this can create problems for coders and devices alike. 00:00 / 00:00 Special Tables Data Tables When you think of a table, you generally think of a data table: a grid used to organize and display data. The example we've been working with so far is a data table. Thile the table we've created is simple enough to be understood and deciphered as is, you may be asked to create very complex data tables that may need more work to make them optimally usable. The more specific the data (displaying stock reports on your cell phone, for example), the more likely that additional table attributes may be required. A complicated data table at nationmaster.com. Tables can be particularly difficult for users that use screen readers. Those using standard browsers can just glance at a table as a whole and get some

11 idea of what the table is about, what kind of data it contains, and how that data is related. Screen readers, however, read off a table cell by cell, lineby line, and unless explicit connections are drawn using tags, a screen reader will not convey how certain cells (such as header cells) are related to other data. There are, however, additional tags and attributes that you can use to provide more meaning to content presented in tables. These additional tags can make tables much more accessible to users with screen readers as well as more readable and useful in standard browsers. Let's take a look at some of these tags and attributes: <caption>: Use the caption tag to provide a brief description of the table. The browser displays the caption by centering it above the table. <summary>: Use the summary tag to provide a more detailed description of the table's contents. The summary is not displayed by the standard browser, and is mainly for the benefit of screen readers. People using screen readers cannot glance at the table as a whole to get an idea of what it contains, so providing a summary gives those users the benefit of having an overview of the table's contents. scope: You can use the scope attribute to associate header cells with the rows or columns that they head. e.g., <th scope="col">item #</th>indicates that this cell heads a column, while <th scope="row">white Teas</th>indicates that this cell heads a row. Now, a non visual browser knows what header cells to associate with which data. <thead>, <tfoot>, and <tbody>: As mentioned earlier, you can also carve out headers, footers, and body sections of a table. You can, for example, enclose all of your header rows within the <thead>tag, and the remaining rows with the <tbody>tag. Doing this does not, by itself, alter the way that the table is displayed. But, some browsers have the capability to print the headers and footers on every page if the table spans more than one page. Mozilla has the capability of scrolling the table body independently of the headers and footers (so that if you have a very long table, you can set it up so that the headers and footers remain stationary while the rest of the table scrolls inside of it). To show you how these tags work, click here to see the code for a basic table showing ipod specifications. Most of the content has been stripped away to focus on presenting where these additional attributes should be placed. Image Slice Tables Image slicing is the process of taking a large image and dividing it up into smaller images using your favorite image editing program. Then you can reconstitute the entire image by placing the image slices within a table. Why would you want to slice up an image? You can create a link, rollover image, or other HTML event that applies to part of an image. Or you may want to apply different file optimization settings to one part of an image. So you could, for example, create an image that can be turned into a navigation menu by making certain parts of the image link to other parts of your Web site. There are quite a few tools available that let you easily slice up your images and even create the table that pieces the images back together. We won't go into the details of using these tools here, as instructions vary according to the tools that you use.

12 You can slice images in Photoshop, as shown above, then export the individual pieces using whatever settings you like for each piece. Photoshop generated the following HTML code, but as you can see, it's no different than what you could have created yourself. Notice that the table has no padding, no spacing, and no border, so that the images will come together seamlessly in the page, looking like a single image. The width and height are equivalent to the images inside, so there is no extra space. <table id="table_01" width="492" height="746" border="0" cellpadding="0" cellspacing="0"> <tr> <td rowspan="2"> <img src="images/sliced_01.jpg" width="101" height="746" alt=""> </td> <td colspan="2"> <img src="images/sliced_02.jpg" width="391" height="273" alt=""> </td> </tr> <tr> <td> <img src="images/sliced_03.jpg" width="264" height="473" alt=""> </td> <td> <img src="images/sliced_04.jpg" width="127" height="473" alt=""> </td> </tr> </table> So now that you've got a sense of tables, one of the longest running and most useful features in HTML, we'll switch gears to one of the newest innovations in coding... Introducing HTML5 The True Successor to HTML 4

13 HTML5 hearkens a radical departure from the HTML 4 you have learned so far, as well as from XHTML. XHTML (a mixture of HTML and XML) was once billed as the successor to HTML 4, the previous standard in Web languages. HTML 4 was not very demanding in how its code was formed, and browsers were designed to be very forgiving of mistakes. Browsers would try to render buggy pages the best they could. XHTML was developed with much stricter syntax rules. For an XHTML page to be considered "valid," it had to abide by many rigid guidelines. For example, you couldn't capitalize your element tags and you had to close all open tags. HTML5 loosens the rules again, but does so by employing simpler language (such as for many of the header elements). Overall, this makes coding easier for Web designers (meaning fewer lazy mistakes!), and more lax validation rules for HTML5 documents (which, again, makes for less of a headache for us). It includes many welcome HTML elements, which is expected, but it also makes the language easier and the syntax more forgiving. Check out to see a few of the great things HTML5 can do. HTML5 offers exciting new features and some flexibility in writing code. What does this mean for HTML 4? Well, nothing really! You can still use the HTML 4 Doctype for your Web pages, code to that specification, and be perfectly right with page validators, your browser, and the world at large. However, we can move forward and adopt additional semantic HTML elements like header, nav, footer, and other cool stuff in HTML5 while still utilizing all of the basic concepts of semantic markup that HTML 4 gave us. But now with the HTML5 specification, we have a markup language that better reflects the kind of Web we use and code for every day. Let's create a simple HTML5 document that uses some of the new elements. Then in the next lecture, we'll try some of the really fancy new features. Setting the DOCTYPE, Charset, and Language for HTML5 Open the the healthy.txt file inside your download folder. This document contains the text for our simple HTML5 example. Start a fresh HTML document and follow along. The doctype declaration could not be simpler for HTML5. Include the following as the first line of your HTML document, as you always would for a doctype declaration: <!DOCTYPE html> Don't forget your usual HTML tags like html, head, and table when working in HTML5! Gone are the long and cryptic doctype declarations of the past; HTML5 requires a mere two words to start rendering your Web page in standards mode. Now add your usual <html>, <head>, and <title>tags to the document. The character set encoding for HTML5 is also much simpler. For the standard UTF 8 encoding, include the following in your head: <meta charset="utf-8" /> Don't forget to set the default language of your document as well. This line is necessary for the browser to use the correct font, spell checker, and so on. Include it in the <html>tag and set it to English: <html lang="en"> Structural Elements (Header, Footer, Section, Nav)

14 HTML5 includes several new elements that add semantic value to the structure of a Web page. When structuring a page in XHTML, you needed to enclose the header, footer, navigation, and so on with separate <div>tags, and then label those <div>tags with meaningful id values like "header" and "nav". (Note that <div>tags still play an important role in HTML, but we'll talk about them later in the course in conjunction with CSS.) Section elements in HTML5 eliminate the need for specially named div tags that were required in XHTML. In HTML5, most of those structural pieces are their own element now, which not only makes it simpler to code, but also makes it easier for Web browsers and search engines to make sense of the content on a page. These elements don't make your page look any different (unless you style them with CSS, as we'll learn in detail later), but rather they define sections of the code. Defining a section heading: <header> The header element defines a section heading of a page. The first line in your downloaded file is our section heading. Use the header element and an h1 heading to define it. <header> <h1>how to Eat Healthy on a Budget</h1> </header> Note that a header element is not uniquely reserved for the top of the Web page. And, unlike <div>elements, you can use headers more than once in an HTML document. Any section of a Web document that is titled can have its own header (as well as its own footer and navigation section as well). This brings us to the more generic <section>element... Defining a generic section: <section> The <section> tag defines a section within a Web document. Nearly anything that would naturally have its own header could be delineated as a section (except for syndicated content like blog posts, which would use the <article>element instead). The healthy eating steps in your download file should go in their own section, along with their own headers. For example: <section> <header> <h1>step One: Plan Your Meals</h1> </header>... </section> Use the footer element for your site's copyright information. Note that with HTML5, the rules for using <h1>to <h6>tags have changed: In previous versions of HTML and XHTML, these tags were used to define document sections, and a document hierarchy was outlined by the correct use of these elements: You were to always use them in correct order (<h2>is always followed by <h3>, and so on), and you could only use <h1>once. Now, we can define a document hierarchy by nesting section elements. And, we enclose the title of each section in the <h1>tag. So, as you can see in our example page so far, there will be multiple <h1>tags within an HTML document, but they will each be within the context of their own section. Defining a footer section: <footer> The <footer>tag encloses elements that end sections of a page. Footers typically include information such as the author, copyright information, and relevant links. Like the other elements mentioned here, you can have more than one footer on a page: You can include a footer with each section within a document. Add the remaining text for the page as a footer.

15 <footer> <p>copyright 2010<p> <p> me at imdandy.com</a>.</p> <p>find me on <a href=" Twitter</a>.</p> </footer> Defining a navigational section: <nav> The <nav>tag carves out navigation sections. Use this element, as you might expect, to delineate lists of links that take you to other sections of the site: <nav> <ol> <li><a href="/home/">home</a></li> <li><a href="/about/">about</a></li> <li><a href="/blog/">blog</a></li> <li><a href="/contact/">contact Me</a></li> </ol> </nav> Like the other new elements in HTML5, you can include more than one <nav> section within a Web page. For example, you might have a navigation menu at the top of the page, as well as a set of navigational links in the sidebar. Defining subheadings As we discussed earlier, HTML5 is a living standard, and that means that some things come and go. Here's a case of that: there is currently no dedicated HTML5 markup for defining groups of headings. So if you're looking, for example, to define a title and subtitle of a section, you have to think carefully about the semantic roles of those headings to ensure that your code remains valid. If your subtitles define new sections, as in a table of contents, you'll want to use <h1>to <h6>elements. If your subtitles simply define further descriptions of a title, you can enclose them in a <p>element in the line below your numbered header element (such as <h1>). For example: <section> <header> <h1>how to Eat Healthy on a Budget</h1> <p>five Tips for Wise Eating without Going Broke</p> </header>... </section> For more information and up to date resources on all things subheading related, see the subheadings section of the W3 specs. Putting It All Together Our sample page combines all of the elements above in a document that should look something like this: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>how to Eat Healthy on a Budget</title> </head>

16 HTML5 isn't supported by older versions of IE. Use the JavaScript Modernizer to automatically make your HTML5 compatible. <body> <nav> <ul> <li><a href="/home/">home</a></li> <li><a href="/about/">about</a></li> <li><a href="/blog/">blog</a></li> <li><a href="/contact/">contact Me</a></li> </ul> </nav> <header> <h1>how to Eat Healthy on a Budget</h1> <p>five Tips for Wise Eating without Going Broke</p> <p>by Mike Pendleman</p> </header> <section> <header> <h1>step One: Plan Your Meals</h1> </header>... </section> <section> <header> <h1>step Two: Stick to Your Grocery List</h1> </header>... </section> <section> <header> <h1>step Three: Frequent Your Farmer's Market</h1> </header>... </section>... <footer> <p>copyright 2010</p> <p> me at <a href="mailto:imdandy@gmail.com"> imdandy.com</a>.</p> <p>find me on <a href=" Twitter</a>.</p> </footer> </body> </html> After the requisite <head>of our document, we've included a navigation menu, a page header, several sections (along with their own headers) and a footer. While a fairly simple document, you can appreciate the semantic organization that HTML5 brings to our Web page. Our page is divided into meaningful sections that we can style with CSS, and that search engines or a Web client can easily parse. Note on HTML5 Support While modern browsers support the HTML5 syntax, the older versions of Internet Explorer don't. In order to support HTML5 in those browsers, a special JavaScript needs to be inserted at the top of the document to force the acceptance of these new HTML elements. Thankfully, this can be done with a very handy JavaScript library called Modernizr, which requires no JavaScript knowledge. To use it, first download the Modernizr JavaScript library (click the Development version and go to File > Save Page As in your browser to save the JS file) and put it in a folder for your Web page or Web site; I like to have a folder called "js" for my JavaScript files. Then add the line of code below to your page head, adjusting the link path as needed for the folder you've chosen and for the file name of your version of Modernizr.

17 <script type="text/javascript" src="/-/js/modernizr js"></script> Make sure that you upload the.js file to the correct location on your server. Just like an image or link, it won't work if it is pointing to the wrong location. That's it! The Modernizr script does some cool things, which we will cover in other lectures, but for now, that's all you need to get your HTML5 supported in IE. Learn how HTML5 has changed the use of audio and video on the Web. Learn how to add multimedia using the audio and video tags. Explore attributes and scripts that that customize multimedia presentation and aid in browser compatibility. Learn guidelines for testing and validating a Web page as well as fixing broken links and images. Discussion Share your thoughts and opinions with other students at the Discussions Board. Exercise Combine tables and HTML5 to create a Web calendar.