- TOPICS:
- Review:
- Introduce:
- HOMEWORK: Review this week's posting to go over what was covered in class this week. There are two be 3 pages in the mid-term project: intro, questions, and answers. Make sure you follow the steps that we went through in class, or what you see down below to produce your three pages. If you have any questions, please email me. We will do one more thing to add to this site in class next week, so do not come to class unprepared. *****Remember, this is the SECOND MOST IMPORTANT GRADE OF THE TERM.*****
- REVIEW:
- Tables: The most obvious, but least common use for HTML tables is for organizing columns and rows of data, much like an accountant’s ledger in which she enters credits and debits. When tables are used, these data are presented in the web-page as a grid of rectangular cells. In such a case, the visibility of the table is required, in that the borders of the columns and rows play a necessary role in the organization of the data. Everything must line up with the grid and be very clear and organized.
You already know how to create a table, so here below here you will find a simple table like the one we created in class:
And here is the code to create such a table: <table border="1px" cellspacing="0px" cellpadding="0px"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> - Page Layout: The second, perhaps less obvious but most common, use for HTML tables is for page layout and design purposes. For this, they are used in order to place content (text and images) around the page where you wish them to be. Using tables then fixes the content in place and does not allow it to shift as the browser window is resized. Without this device, sophisticated page-layout would be impossible.
- without tables, you have only three (3) options for placing content on the page, alignment to the left, right, or center.
- with tables, you may not only align to the left, right, and center, but also to the top, middle, and bottom. Moreover, this is for each and every individual cell of the table: tables allow you to divide up the larger space of the browser window into the smaller rectangles of the table cell, and you may further position your content with the align and valign attributes.
- Modifying a table entails here making simple modifications to the size and colors of a table, as well as its alignment strategies. In the following code, I add text, and then I change the alignment and width of the cells.
<table border="1px" cellspacing="0px" cellpadding="0px">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td width="200px" align="center" valign="top"> </td>
<td width="150px">link 1;</td>
<td width="25px"> </td>
<td width="150px" align="center" valign="top">link 2</td>
<td width="25px"> </td>
<td width="150px" align="center" valign="top">link 3</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Although I do not have the space required in my blog (I would need at least 700px in width) to demonstrate the actual table that I have outlined with my new code above, below you will find a close approximation:
link 1 link 2 link 3 - Transforming a table in my design process here refers to more complex and rigorous modifications of the table. In these transformations, as demonstrated in last weeks' class, we will change the number of cells within various rows and columns by joining or merging them together using colspan or rowspan.
In the next step, we will join cells 2-6 in rows 2 and 4.
<table border="1px" cellspacing="0px" cellpadding="0px">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="5"> </td>
<td> </td>
</tr>
<tr>
<td width="200px;" align="center" valign="top"> </td>
<td width="150px">link 1;</td>
<td width="25px"> </td>
<td width="150px" align="center" valign="top">link 2</td>
<td width="25px"> </td>
<td width="150px" align="center" valign="top">link 3</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="5"> </td>
<td> </td>
</tr>
</table>
link 1 link 2 link 3
- without tables, you have only three (3) options for placing content on the page, alignment to the left, right, or center.
- Tables: The most obvious, but least common use for HTML tables is for organizing columns and rows of data, much like an accountant’s ledger in which she enters credits and debits. When tables are used, these data are presented in the web-page as a grid of rectangular cells. In such a case, the visibility of the table is required, in that the borders of the columns and rows play a necessary role in the organization of the data. Everything must line up with the grid and be very clear and organized.
You already know how to create a table, so here below here you will find a simple table like the one we created in class:
- Introduce:
- Inserting an Image Banner is exactly the same process as inserting any image into a table: instead of putting text (such as LINK 1) above, or a blank space ( ), you simply place the <img/> tag between the <td> tags , as demonstrated below.
Before you create the code, however, you should use PhotoShop to create a banner with only color for the text. The background color should be black. See my banner below and use as a model for your own:
<table border="1px" cellspacing="0px" cellpadding="0px">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="5"><img src="images/banner.gif" alt="DMA110 Mid-Term Project"/></td>
<td> </td>
</tr>
<tr>
<td width="200px;" align="center" valign="top"> </td>
<td width="150px">link 1;</td>
<td width="25px"> </td>
<td width="150px" align="center" valign="top">link 2</td>
<td width="25px"> </td>
<td width="150px" align="center" valign="top">link 3</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="5"> </td>
<td> </td>
</tr>
</table>
link 1 link 2 link 3 - Adding more CSS to a web page entails first that we review how to add the most basic CSS to a web-page, such as the background color . To add CSS to a page as we have been doing in this class up to now, we place all the code into the head section of the document. Since it is an entirely different kind of code from HTML or XHTML, we must mark it off as such to indicate that we have switched gears and are typing a different code altogther. To do this, we must first type a pair of tags, the <style></style> tag pair. Next, we must add an attribute within the angle brackets of the first tag, but following the tag term, the type attribute. And finally, we must make certain to type all the CSS code in between this pair of tags, as idicated below.
<style type="text/css">
the css code goes here
and here
and here, etc.
</style>
CSS code syntax follows very simple rules, and there are only three (3) basic terms to any style definition:
- The first term is known as the selector. It indicates which part or section of the document, or block of text will take on the new styling.
- The second term comes after an opening curly bracket { and is known as the property. It indicates which aspect or characteristic of an element, such as size or color, is to be modified.
- The third term comes after a colon : and is known as the value. It indicates the exact definition of a particular characteristic, which color, for example, or how big an element is to be.
- a:link — this attaches a style to the links as they sit in the page before they have been 'clicked on'.
- a:visited — this attaches a style to the links as they sit in the page after they have been 'clicked on'.
- a:active — this attaches a style to the links at the moment they are being 'clicked on'.
- a:hover — this attaches a style to the links at the moment the cursor 'passes over' them.
link 1 link 2 link 3 - Creating a Complex Table: A Table within a Table—In last week’s class we saw the introduction of the issue of tables in HTML as page layout devices. As you have seen the last two weeks, when used as such, they are usually invisible: that is, the borders are turned off, set to zero, and the grid is therefore hidden. As a result, only the content of the table, whatever is inside each cell, is visible, and not the table cells themselves. This week, we will see that the content of the individual cells of the table is not limited to images and text, but may also include another table. It is possible to place an entire table inside of another table for more advanced layout design. In this way, for the mid-term, you have one large table into which the banner image at the top, and the links are placed. It is the table that organizes the whole browser window, and divides it into smaller more manageable parts. Next, there is the second (inner) table. Like the other content, the image and the links, this table is placed inside the first (outer) table: all parts of this new table—the opening and closing table tags, the table row tags, and the table data tags—must be inside a single cell of the first table. This second table contains all the questions of the mid-term. This way, it makes it easier for you to add one row at a time and type one question at a time.
- In the first part of the class demonstration, we constructed the primary table.
- In the second row, we used the colspan attribute to join the five (5) middle cells into one cell that stretches across the middle of the table. We did this so as to make a cell that was large enough to but the title banner image in it.
- In the fourth row, we repeated what we did in the second row.
- In the second part of the demonstration, we created the banner image in PhotoShop to place inside the top row. Since it only has a couple colors inside of it, we optimized it as a .gif image.
- In part three, we placed the image into the table and created the three (3) links.
- Finally, in part four (see below), we will create a new, second table inside of the first. This table is where the questions for the mid-term will be typed, and it is placed inside the 2nd larger cell of row four (4).
- We will start by creating a table with two rows, and two cells inside of each row, setting the width for the first cell much narrower than the second cell, which we won't set at all.
link 1 link 2 link 3 - Then, add rowspan = "2" to the second cell of the first row.
link 1 link 2 link 3 - And delete the second cell of the second row.
link 1 link 2 link 3 - Finally, copy and paste both rows for each question in the midterm take-home exam. The example below shows it copied three more times.
link 1 link 2 link 3
- We will start by creating a table with two rows, and two cells inside of each row, setting the width for the first cell much narrower than the second cell, which we won't set at all.
- Inserting an Image Banner is exactly the same process as inserting any image into a table: instead of putting text (such as LINK 1) above, or a blank space ( ), you simply place the <img/> tag between the <td> tags , as demonstrated below.
Before you create the code, however, you should use PhotoShop to create a banner with only color for the text. The background color should be black. See my banner below and use as a model for your own:
Saturday, October 27, 2007
Fall 2007
week 6: 10/24
Hi again everyone,
I know you all have a lot of work to get done in all of your classes. Unfortunately, that is simply the way things are in college: things build up in the middle and then again at the end; however, you can mitigate this problem by trying to keep up in class. This means not simply doing the homework each week, but to make certain that you know thoroughly what is covered each week by going beyond the weekly assignments. The homework that I assign each week in general is meant to be a minimum amount to do over the week just so you don't forget everything covered in class, so that you'll come to the next class not having to relearn everything from the previous week.
It is true also, as I've mentioned before, that this stuff can be tedious, and for that it is probably not your favorite thing to spend time doing when not at work or in class. But it does pay off. If you keep putting in the time, you will see that it will become much easier to do by the end of the semester.
So, work hard, and please don't miss the next class. I don't advocate missing sleep, or not eating, or not taking care of your life's necessities (family, work, etc.), but if there's ever a time to sacrifice a little bit while in school, mid-term time is certainly one of them. Therefore, if necessary, it is worth suffering a little by doing without an hour or two of sleep this week so you can get the stuff done and turned in to me on time.
Good luck, Carter-
Saturday, October 20, 2007
Fall 2007
week 5: 10/17
Hi everyone,
I know that this stuff with tables that we have been doing is a bit tedious, but there is a method to my torture: tables are an essential part of the LAYOUT of web-pages, and so I tend to spend lots and lots of time on them so that you all get used to the tedium of all those damned TD and TR tags, colspan, rowspan, tables within tables, etc. You get the point.
In any case, you all do seem to be getting it, even if it seems confusing and slow. I didn't see any real problems for most of you yesterday, even if you might see it differently. You might think that you are simply not getting it; but I do not think that that is true. Sure, some of you are having some trouble, but it mostly has to do with the organization of your code, details like that, and NOT with the whole concept. From what I have seen, you all get the concept and that is the most important part. The cure is really just to work and practice. It is mainly up to you to get yourself to understand. You've got to work at it.
Remember, ORGANIZATION is the key when it comes to HTML and especially with regard to tables. Keep your rows aligned and your cells evenly spaced out so you can easily see where one row begins and another ends. This is important when you need to count rows and cells and to know which ones you need to delete when using rowspan and colspan.
Below, you will see a similar lesson to ones we have done in class the last couple of weeks. At the very bottom is a more difficult problem. See if you can do it and if you understand it.
At the very end, you will see an image of a table that you should try to produce for next week for extra credit.
Please, also take notice that I am assigning the Mid-Term Exam this week. It is a take-home test, so please download the test below and follow instructions. I will NOT accept late exams.
Also, although I accept that since this is a take-home exam that you will probably help each other, and I encourage that, I will not accept exams that look too similar to each other. This means you must word your answers in a UNIQUE way, so that I know they are your answers and only your answers.
So, please do not disappoint me on this. Carter-
- TOPICS:
- HOMEWORK:
LINK Mid-Term Exam, Part 1 //
DUE Wednesday, October 24, 6:30pm (no later);
- REVIEW:We have worked with HTML Tables now for a couple weeks (almost three weeks now if you count since our last class), and we have dealt primarily how to create and manipulate our tables: what are the tags that go into making them, how to begin to set them up by row and then by cell, how to change the way they look with the border and background, and how to create larger cells both horizontally and vertically. In our last class, we continued with this exploration of tables by pushing further the complexity of the tables: we increased our investigation of two attributes for the <td> tag, rowspan and colspan. These attributes extend the ability of the <td> tag to become larger both horizontally and vertically, to take up the space of more than one cell, and perhaps to occupy the space of an entire row. This week, therefore, we learn no new HTML tags, but instead simply deepen our knowledge and understanding of what has already been covered. Next week we will look even further into the capabilities of HTML Tables. This way, hopefully, by spending four (4) entire classes on the subject of tables, you will begin to understand their importance in creating sophisticated designs for your web-pages. But first, let us review what we went over in previous classes on tables:
- Basic tags used in the creation of HTML tables: <html>, <table>, <title>, <tr> >, and <td>.
- Tables are created by the <table> tag, another example of a block level tag; however, as mentioned above, they are a special case, not only for what they can create in a web-page, but primarily for the many other varied tasks they may perform.
First and foremost, tables refer exactly to what the term suggests: they create tables for data, such as in accounting ledgers. By appearance, the table tag creates a grid of rectangular ‘cells’ where some kind of data or information is placed. These tables are organized by column (vertical divisions up and down the height of the page) and by row (horizontal divisions across the width of the page). They are built in HTML, however, one row at a time.
Here are a series of attributes that may be used with the <table> tag:
- width—changes the width of the table with units in pixels or as a percentage of the browser window.
- border—adds a border around the table and between the various rows and cells with a thickness of the designer’s choice with units in pixels. To be used sparingly as it tends to be over-used and used badly.
- bgcolor—the same attribute used in the <body> tag. In this case, it adds a background color only the area of the table itself. The particular color must be indicated in the hexadecimal color code.
- bordercolor—much like the bgcolor attribute in that it uses the hexadecimal color code, but in this case it only colors the borders.
- cellspacing—regulates the spacing between the various cells in the table.
- cellpadding—regulates the spacing around the edge against the border within each cell of the table.
- Table rows are created row-by-row using the <tr> tag, the table row tag. Each of these tags marks the beginning and ending of a single row in a table. For each row, one pair of these tags is necessary, one marking the start of the row, and one the end of it. Each row is composed of one or more cells.
- Table cells are the individual rectangles that make up the grid of the table. Each horizontal row consists of at least one rectangular cell where text or some kind of image may be placed. Typed between a pair of <tr> tags, each pair of <td> (for table data) tags creates one cell. For each additional cell, there must be another pair of <td> tags, and for each of these cells there must be some kind of content between the tags, or the cell will not register and therefore not appear in the browser window. This content may be in the form of an image, a link, some text, or even a blank space created by the series of characters, . Here are a series of attributes, which may be used with the <td> tag:
- width—changes the width of the cell and all of the cells below it in the same column with units in pixels or as a percentage of the table width.
- bgcolor—the same attribute used in the <body> tag. In this case, it adds a background color only the area of the table itself. The particular color must be indicated in the hexadecimal color code.
- align—sets the horizontal alignment for the content within the particular cell. There are three (3) possible values for this attribute: right, left, and center.
- valign—sets the vertical alignment for the content within the particular cell. Here, also, there are three (3) possible values: top, bottom, and middle.
- colspan—allows the particular cell to extend, or span, horizontally across more than one column of cells.
- rowspan—allows the particular cell to extend, or span, vertically downward across more than one row of cells.
- Table cells are the individual rectangles that make up the grid of the table. Each horizontal row consists of at least one rectangular cell where text or some kind of image may be placed. Typed between a pair of <tr> tags, each pair of <td> (for table data) tags creates one cell. For each additional cell, there must be another pair of <td> tags, and for each of these cells there must be some kind of content between the tags, or the cell will not register and therefore not appear in the browser window. This content may be in the form of an image, a link, some text, or even a blank space created by the series of characters, . Here are a series of attributes, which may be used with the <td> tag:
- INTRODUCE: In our last class we continued working with Tables in HTML, but focused on two attributes (rowspan and colspan) which go with the <td>tag to extend a cell downward or upward. Here is how it works:
horizontal (side to side) arrays of table cells are considered rows, and vertical (up and down) arrays of cells are considered columns. And just as columns in buildings are also vertical, they support a horizontal beam which spans across several columns. Just look at the front of the NYC Post Office across the street. It has columns also.
- Colspan: In the picture above and to the right you can see that there are 3 columns which support the beam above them, where the word span is written. The table below this image is similar: there are two rows, one above the other, but the one on the top spans across the two columns in the row below. In HTML we would say that the big cell of the top row has a colspan of 2 because it spans the 2 columns below it.
In the table below, there are three (4) rows (horizontal divisions) and four (4) columns (vertical divisions):
Notice that the center row extends all the way across all four of the columns. This is because it has a greater colspan than the other cells of the table, <td colspan="4"> </td>. That one row, the one in the middle, only has one cell in the entire row. The other two rows, the one above and the one below, each have four (4) cells, and the code for this table looks like so: <table width="100%" border="1px" cellspacing="0px;" cellpadding="0px"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td colspan="4"> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> If for whatever reason, you forgot that the second row gets only one cell, and instead put four (4) cells like all the other rows, your code would be like what follows--notice that row 2 has four cells like all the others, even though the first cell in that row has a rowspan of 4: <table width="100%" border="1px" cellspacing="0px;" cellpadding="0px"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td colspan="4"> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> The previous code produces a table like the one below. Look how the second row has some extra cells hanging off the end:
All you need to do to solve that problem is simply delete those extra cells. In this case we have three extra cells hanging off the end, so we just need to delete those three in the second row and then it will look as it should. In the next example, we have a similar problem, but in the opposite direction: instead of extending a cell horizontally as we have in the previous example, we can also extend a cell vertically as we will see next. - Rowspan: In the following example, you will see another table; however, instead of a cell getting larger across the table, it gets larger down the table. This cell also has an increased span, but we call it rowspan instead of colspan. That is because the cell grows larger downward from one row to another. Remember, rows are like horizontal layers. In the following example, the first cell extends downward to the bottom of the table, so it spans more than one row. It therefore has an increased rowspan, a rowspan of 4:
The code for this table is as follows, you should take note that in this case, only the first row has four (4) cells. All of the other rows have only three cells. <table width="100%" border="1px" cellspacing="0px;" cellpadding="0px"> <tr> <td rowspan="4"> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> And that makes sense if we examine the table. The first cell of the table, the big one, starts in the upper-righthand corner. This is the first cell of the first row. All we did to make it bigger, to make it go from top to bottom of the table, was use the rowspan attribute. If we took that out, then we see that we're missing a cell in each of the other rows. What happens, then, when we increase the rowspan is that the cell pushes downward, moving all the cells below it to the right. If we had forgotten to remove one of the cells in rows 2, 3, and 4, then we would have the table as follows:
The code for this mistake is below: <table width="100%" border="1px" cellspacing="0px;" cellpadding="0px"> <tr> <td rowspan="4"> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> Like the colspan example, this can be remedied simply by removing one cell from rows 2, 3, and 4. - Colspan & Rowspan:These two attributes may also be used together instead of just one or the other. This way, a table cell can be expanded both horizontally and vertically, both across the table and down the table. The table below is an example of this:
and below is the code for such a table: <table width="100%" border="1px" cellspacing="0px;" cellpadding="0px"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td colspan="2" rowspan="2"> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> Notice above, that there are only three (3) cells in row 2, and only two (2) cells in row 3. Row 2 is the row that contains the cell with the rowspan and colspan attributes. If it, and the row below it, row 3, had the same number of cells as the other two rows, rows 1 and 4, here is what the table would look like:
Notice here that this time there are three extra cells, one in the second row, and two in the third row. As for the other examples, the solution to this mistake is simply to delete the extra cells. Here is the code for the previous table with the unnecessary cells shown in red: <table width="100%" border="1px" cellspacing="0px;" cellpadding="0px"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td colspan="2" rowspan="2"> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> - Complex usage of Colspan & Rowspan:As mentioned previously, tables in web-pages and web-sites are ubiquitous, they are everywhere. In most cases these tables are used invisibly, with the borders set to zero, as layout devices. Many times, therefore, it can be quite difficult to discern exactly what is the structure of the tables at work in a particular design or layout. This skill, however, deciphering the code of already existing sites, understanding the tables of sites already publish, is a valuable one especially given the reality that much work in web-design is work with templates and work on maintenance. It is important to learn how to figure out a table so that it may be revised, or edited, or so that it may be improved or adapted to new uses. Below here, then, is an example from class of a complex use of colspan and rowspan in a table:
<table width="100%" border="1px" cellspacing="0px;" cellpadding="0px"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td colspan="2"> </td> </tr> <tr> <td> </td> <td rowspan="5"> </td> <td> </td> <td colspan="4"> </td> </tr> <tr> <td> </td> <td rowspan="4"> </td> <td> </td> <td colspan="3"> </td> </tr> <tr> <td> </td> <td rowspan="3"> </td> <td> </td> <td colspan="2"> </td> </tr> <tr> <td> </td> <td rowspan="2"> </td> <td rowspan="2" colspan="2"> </td> </tr> <tr> <td> </td> </tr> </table> A pattern in the code for such a table is less evident perhaps than the other previous examples given; however, note that there the first row has seven cells, and that the last row only has one cell. Because of this, I will break down the table and just do a little at a time. We will begin with rowspan, investigating how it has been achieved, and then move on to colspan afterwards. Prior to that and just as a point of comparison, below I show the original table of 7 rows with 7 cells per row to show how the increased rowspan and colspan affects it, the unnecessary cells in red:- The next table shows the first step, the original table with just the rowspan added:
<table width="100%" border="1px" cellspacing="0px;" cellpadding="0px"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td rowspan="5"> </td> <td> </td> <td colspan="4"> </td> </tr> <tr> <td> </td> <td> </td> <td rowspan="4"> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td rowspan="3"> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td rowspan="2"> </td> <td rowspan="2"> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> - Above here, it is interesting that the unnecessary cells are not hanging off the end of the rows, but are nestled in between the enlarged cells, which makes the selection of which cells to eliminate particularly difficult. In fact, unlike previous examples, the last cells of each row are to be retained and not eliminated. See below the table with the unecessary cells removed:
- The next step is to add in the colspan to the cells we wish to expand across the cells. We will do this first, however, before we remove any unnecessary cells:
<table width="100%" border="1px" cellspacing="0px;" cellpadding="0px"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td colspan="5"> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td rowspan="5"> </td> <td> </td> <td colspan="4"> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td rowspan="4"> </td> <td> </td> <td> </td> <td colspan="3"> </td> <td> </td> </tr> <tr> <td> </td> <td rowspan="3"> </td> <td> </td> <td> </td> <td colspan="2"> </td> </tr> <tr> <td> </td> <td rowspan="2"> </td> <td rowspan="2" colspan="2"> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table>- As you can see, things are coming along quite well. We simply have to remove the unnecessary cells in red. Once done, we get the table and code below, the same as what we saw in the beginning of this exercise: <table width="100%" border="1px" cellspacing="0px;" cellpadding="0px"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td colspan="5"> </td> </tr> <tr> <td> </td> <td rowspan="5"> </td> <td> </td> <td colspan="4"> </td> </tr> <tr> <td> </td> <td rowspan="4"> </td> <td> </td> <td colspan="3"> </td> </tr> <tr> <td> </td> <td rowspan="3"> </td> <td> </td> <td colspan="2"> </td> </tr> <tr> <td> </td> <td rowspan="2"> </td> <td rowspan="2" colspan="2"> </td> </tr> <tr> <td> </td> </tr> </table>
- The next step is to add in the colspan to the cells we wish to expand across the cells. We will do this first, however, before we remove any unnecessary cells:
- Extra CreditOkay, here you go. Look at this image and try to reproduce it in HTML. Bring it to class next week and show to me for extra credit.
- The next table shows the first step, the original table with just the rowspan added:
- REVIEW:We have worked with HTML Tables now for a couple weeks (almost three weeks now if you count since our last class), and we have dealt primarily how to create and manipulate our tables: what are the tags that go into making them, how to begin to set them up by row and then by cell, how to change the way they look with the border and background, and how to create larger cells both horizontally and vertically. In our last class, we continued with this exploration of tables by pushing further the complexity of the tables: we increased our investigation of two attributes for the <td> tag, rowspan and colspan. These attributes extend the ability of the <td> tag to become larger both horizontally and vertically, to take up the space of more than one cell, and perhaps to occupy the space of an entire row. This week, therefore, we learn no new HTML tags, but instead simply deepen our knowledge and understanding of what has already been covered. Next week we will look even further into the capabilities of HTML Tables. This way, hopefully, by spending four (4) entire classes on the subject of tables, you will begin to understand their importance in creating sophisticated designs for your web-pages. But first, let us review what we went over in previous classes on tables:
Subscribe to:
Posts (Atom)