 |
|
|
 |
 
|
Intermediate HTML Tutorial: TablesHome > Build > Programming > HTML > Intermediate HTML Tutorial 2.1 Tables Tables are a necessity for any professional web designer. Without tables, pages are often very disorganized, or very ordinary. With tables, sites can be organized logically and information can be displayed in a uniform way. Tables are probably also the toughest aspect of Intermediate HTML to master. We recommend that you read this section thoroughly. It might not be a bad idea for you to read it twice. We also recommend that when you begin working on tables, work with a WYSIWYG program where you can work with the source code. Macromedia's Dreamweaver is a good example. With Dreamweaver, you can have an HTML box open while you make your changes visually. When you create and modify your tables, you can watch Dreamweaver generate the code. We also recommend that you look around at other sites. If you are impressed by a site's organization, then please look at the Page Source and explore their table layout. Once you have mastered tables, your site creation will astonish you. Tables are the backbone of any well-designed site. They can make or break a site. Many people ask if they are isolating a % of their user base by using tables. The truth is, some people with older browsers (pre 3) might be isolated, and might not be able to view the site correctly. But the percentage of people using those older browsers is quickly dwindling, and is quite low now. It's always a good idea to offer a text version of the site. If you offer a text version, that gives an alternative for Table-disabled browsers. It's probably not in anyone's best interest to compromise the quality of a site based on 1% or less of users. We'll get started with simple tables. To create a table, you must begin by using the <TABLE> container tag. This tag also has several attributes that you will find to be extremely important. We will cover those attributes soon. First, we'll just get the table on the page. Tables are divided into Rows and Columns. They are reminiscent of charts or graphs you see often with vertical and horizontal lines. The terminology is nothing new to anyone who has used a Spreadsheet program in the past. Each box within the lines is called a Cell. With HTML, you can create Rows, Columns, Cells, and Table Headers. Table Headers are the same as any other cell, only they are usually centered and displayed in a bold font. The tags are as follows: <TH> - Table Header Note: All three of these tags are container tags. Some browsers will ignore a left off closing tag, yet it's not a good habit to get into. Here is an example of a basic table: <HTML> Not a very good looking table, but it's a start. Here are some important things to remember: The <TD> and <TH> tags are required to input data. They both define a cell, <TH> being a Header cell, and <TD> being a normal cell. The <TR> tags defines the table layout. It has nothing to do with the data inside. Here is a way to make the table we just did a little more interesting: <B>Browser Visitors</B> We put a <TD></TD> before the Table Headers, and before the Table Data. When you create insert an empty <TD> tag, it creates a blank cell. This is a good technique for organizing your table, however it doesn't look very good with a border. So, we put a - which is a non-breaking space. We did this simply to have some content in our blank cells. And, to top it off, we gave the cells some width, 40 pixels. |
|||||||||||||||||||
|
