Hey all,
I figure that I would expose you guys to the basics of creating tables in html. There are many ways to do this. The wysiwyg way of constructing a table would be to use the built-in eCollege table wizard, or to build a table in in MS Office or Dreamweaver. These methods offer limited customization, as is the nature of visual editors. In order to really customize every aspect of the table, you must have a working knowledge of the html used to create the table.
The basic elements of a table are as follows:
This is what the code for a basic table with a border looks like. And this is what that table would look like:
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
The elements include table rows <tr> and table definitions <td> which are the individual cells. { As an aside, if you ever want to include an empty cell in a table, make sure you put the code: . That is html talk for a non-breaking space. Nothing will show up in the cell, but if you don't have at least a space in there, the cell itself might not show up. The code with the definition would look like <td> </td> }
below is an example of what table borders look like. In short they look awful. On the left is the code and on the right is the execution:
With a normal border:
With a thick border:
With a very thick border:
|
Here is what the code for tables looks like which have various numbers of row and columns:
|
Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag. One column:
One row and three columns:
Two rows and three columns:
|
A basic note about html is that every time you open a tag, you must close it. So every <div> needs a </div>, and every <td> needs a closing </td>. Thus you need to keep track of all your <tr></tr>'s and <td></td>'s. If you build a 3x3 table, make sure that every row has three cells. Such would look like:
If you do not want any border, then either write it <table border="0"> or <table>. Now to add a little more to the tables, it is really easy to include captions and headers. Headers are similar to putting <b>bold</b> within the cells, but is a more proper and much cleaner way to do so. You can assign any cell to be a header cell, but for continuity they are typically either vertically or horizontally aligned. Here are some examples of captions and headers:
|
Now suppose you want a cell that spans more than one column or more than one cell. You would define that within the cell by using the following tag: colspan="[the number of cells it should span]". A quick example below:
Cell that spans two columns:
Cell that spans two rows:
|
||||||||||||
If you would like to include cell padding (which I almost always do), then you can include that information within the <table> tag. Cell padding is basically like putting space between the content of the cell and the border or wall of the cell. Some examples below:
Without cellpadding:
With cellpadding:
With lots of cellpadding:
|
One final attribute I will cover in this blog post is defining widths and heights for tables or cells. There are two different ways to define the the attributes for the width or height. You can either specify pixels or percentages
| Value | Description |
|---|---|
| pixels | Sets the width in pixels (example: width="50") |
| % | Sets the width in percent of the surrounding element (example: width="50%") |
In case you are wondering what the code for the above table looks like:
So these are the basics of what a table looks like in the code. With a little practice, coding a table from scratch can become as easy as creating an un/ordered list (also very easy). In a future post I will cover inline css edits and styling. These "bells and whistles" (sorry for the buzwords, Gia!) can be simple, but they can also be very cluttered. The main problem with the wysiwyg editors is that the more you tweak them, the more cluttered the code gets. Often the tweaks write additional code, instead of replacing code. So on one line you might find width="65%", but further down on the same line you might find a bit of code that reads width=227.3pt. These two attributes might mean different things, but the poor web browser can only accept one value. Also, if you copy a table from Word or Excel into a visual editor (eCollege, dreamweaver, etc.), it is hard to tell what the code will look like.
Just to show you how unnecessarily messy the code can get, below is a table that I modified this afternoon for PB536. As an exercise, try to see how much of the table you now understand based on what you learned from this post:
| Post Type |
Post Composition |
Points |
|
Initial Post |
The first post for every discussion should exhibit a strong statement to answer, or partially answer, the main discussion question. This answer should incorporate a concise statement backed by readings from the class or another source, and it should stimulate further discussion.
|
9 |
|
Reply |
Each student should reply to a minimum of three other initial posts per week. Good answers address the post, are supported by readings or other facts, and challenge other participants to further explore the topic. |
4 points each |
| Total |
21 points |
|
|
||
by the way, that last table is an example of "bad" html. I modified an existing table so that it would look good within the eCollege frame, but I made no effort to clean the code. Resultantly, you get things like...
ReplyDelete<font size="4"><font color="#f2f2f2"><font face="Arial">Post Type</font></font></font>
...as opposed to something cleaner:
<font face="Arial" color="#f2f2f2" size="4">Post Type</font>
Sadly, that is one of my tables created from Word. I know it adds alot of extra junk, but HTML tables confused me until now.
ReplyDeleteThank you so much for showing me how to simplify this. Can you please give me the quick code for that color blue as the heading to the table as well as what the border color code is?