 |
|
|
|
||
|
|
|
CONTENTSWhat Is a Table?A table is a rectangular arrangement of rows and columns on your screen. To make sure you understand what's going on let's check out a bit of table lingo:
Here are just a few advantages that tables bring to the (table):
How to Build a TableThe Simplest Case: A One-Row TableYour tables will always begin with the following basic container: <TABLE> All the other table tags fit between these two tags. There are two things you need to know about the <TABLE> tag:
After you do that, most of your remaining table chores will involve the following 4-step process:
To add a row, you toss a <TR> (table row) tag and a </TR> tag (its corresponding end tag) between <TABLE> and </TABLE>: <TABLE BORDER> Now you divide that row into columns by placing the <TD> (table data) and </TD> tags between <TR> and </TR>. Each <TD></TD> combination represents one column (or, more specifically, an individual cell in the row), so if you want a three-column table, you'd do this: <TABLE BORDER> Now you enter the row's cell data by typing text between each <TD> tag and its </TD> end tag: <TABLE BORDER> Remember that you can put any of the following within the <TD> and </TD> tags:
Images? Sure! Tables are a great way for text and graphics to get along with each other and not step on each other's electronic toes. For example, if you want your home page to have an introductory paragraph surrounded by an image on each side. This is impossible with other HTML commands, but tables make it a snap. Here's a snippet of our home page HTML file: <TABLE> As you can see, the first column displays the image name.jpg; the second column is the introduction; and the third column is another image: name2.jpg. Note, too, that these kinds of tables look best without a border. Adding More RowsWhen your first row is firmly in place, you simply repeat the procedure for the other rows in the table. For our example table, here's the HTML that includes the data for all the rows: <TABLE BORDER> Creating a Row of HeadersIf your table displays stats, data, or other info, you'll make your readers' lives easier by including labels at the top of each column that define what's in the column. (You don't need a long-winded explanation; in most cases a word or two should do the job.) To define a header, use the <TH> and </TH> tags within a row, like so: <TR> As you can see, the <TH> tag is a lot like the <TD> tag. The difference is that the browser displays text that appears between the <TH> and </TH> tags as bold and centered within the cell. This helps the reader differentiate the header from the rest of the table data. Remember, though, that headers are optional; you can bypass them if your table doesn't need them. Here's how we added the headers for the example you saw at the beginning of the chapter:
Including a CaptionThe last basic table element is the caption. A caption is a short description (a sentence or two) that tells the reader the purpose of the table. You define the caption with the <CAPTION> tag: <CAPTION ALIGN=where>Caption text goes here.</CAPTION> Here, where is either TOP or BOTTOM; if you use TOP, the caption appears above the table; if you use BOTTOM, the caption appears below the table. Here's the <CAPTION> tag from the example: <TABLE BORDER> More Table TidbitsAligning Text Within CellsThe standard-issue alignment for table cells is left-aligned for data (<TD>) cells and centered for header (<TH>) cells. Not good enough? No sweat. Just shoehorn an ALIGN attribute inside the <TD> or <TH> tag and you can specify the text to be left-aligned, centered, or right-aligned. Here's how it works: <TD ALIGN=alignment> In both cases, alignment can be LEFT, CENTER, or RIGHT. That's not bad, but there's even more alignment fun to be had. You can also align your text vertically within a cell. This comes in handy if one cell is quite large (because it contains either a truckload of text or a relatively large image) and you'd like to adjust the vertical position of the other cells in the same row. In this case, you use the VALIGN (vertical alignment) attribute with <TD> or <TH>: <TD VALIGN=vertical> Here, vertical can be TOP, MIDDLE (the default alignment), or BOTTOM. Here's an example document that demos each of these alignment options: <HTML> Spanning Text Across Multiple Rows or ColumnsThe data we've entered into our table cells so far has been decidedly monogamous. That is, each hunk of data has used up only one cell. But it's possible (and perfectly legal) for data to be bigamous (take up two cells) or even polygamous (take up three or more cells). Such cells are said to span multiple rows or columns, which can come in quite handy for headers and graphics. Let's start with spanning multiple columns. To do this, you need to interpose the COLSPAN (column span) attribute into the <TD> or <TH> tag: <TD COLSPAN=cols> In this case, cols is the number of columns you want the cell to span. Here's a simple example that shows a cell spanning two columns: <HTML> Spanning multiple rows is similar, except that you substitute ROWSPAN for COLSPAN in <TD> or <TH>: <TD ROWSPAN=rows> The rows value is the number of rows you want the cell to span. Here's an example that shows a cell spanning two rows: <HTML> Extra Table ExtensionsThe border size: To change the thickness of the table border, you may assign a value to the <TABLE> tag's BORDER attribute. (Note that this applies only to the part of the border that surrounds the outside of the table; the inner borders aren't affected.) For example, to display your table with a border that's five units thick, you'd use the following:<TABLE BORDER=5>The width of the table: To change the thickness of the table border, you may assign a value to the <TABLE> tag's WIDTH attribute. If you need your table to be a particular width, you can either specify a value in pixels or, more likely, a percentage of the available window width. For example, to make sure your table always usurps 75 percent of the window width, you'd use this version of the <TABLE> tag: <TABLE WIDTH=75%>The width of a cell: You can also specify the width of an individual cell by adding the WIDTH attribute to a <TD> or <TH> tag. Again, you can either specify a value in pixels or a percentage of the entire table. (Note that all the cells in the column will adopt the same width.) In this example, the cell takes up 50 percent of the table's width: <TD WIDTH=50%>The amount of space between cells: By default, browsers allow just two units of space between each cell (vertically and horizontally). To bump that up, use CELLSPACING attribute for the <TABLE> tag. Here's an example that increases the cell spacing to 10: <TABLE CELLSPACING=10>The amount of space between a cell's contents and its border: Browsers like to cram data into a cell as tightly as possible. To that end, they leave a mere one unit of space between the contents of the cell and the cell border. (This space is called the cell padding.) To give your table data more room to breathe, use the <TABLE> tag's CELLPADDING attribute. For example, the following line tells the browser to reserve a full ten units of padding above, below, left, and right of the content in each cell: <TABLE CELLPADDING=10> Here's a Web page that shows you a fer-instance for each of these extensions: <HTML> The Least You Need to KnowThis chapter showed you the ins and outs of creating World Wide Web tables in HTML. Admittedly, tables are a bit more convoluted than the simple tags we've looked at so far. So, just to help things sink in, here's a quick review:
|
|
Make KacMac your home page Add URL - Information Center - Contact us - Terms of Service - Privacy Policy - Advertising |  |
|
Copyright © 2004 KacMac. All rights reserved. |
