Tables are “A systematic arrangement of data usually in rows and columns for ready reference.” (from Merriam-Webster, http://www.merriam-webster.com/dictionary/table).
Tables are nice, within a website, because it allows the viewer to quickly find links and data without having to search through all the contents of the page being viewed.
Within this tutorial you will learn the code necessary to create a table for your website.
Software needed: Adobe Dreamweaver
HTML table terminology & Important Info
· Tables consist of rows (horizontal) and columns (verticle).
· Table… <table> </table>
· Table Row… <tr> </tr>
· Each row is divided into data cells (like in an excel spreadsheet); this is where the context for the cell is placed. (<td> tag)
· Table Data… <td> </td>
· <td> tag can contain information such as text, links, images, forms, lists, etc.
Step 1: Open up Adobe Dreamweaver.
Click the following in order given:
Files
New
Page Type: HTML
Layout: <none>
Create
Step 2: Click the “Split” button at the top left-hand corner of the document. This allows you to few both the HTML code as well as an example of the browser. Once here you will find code automatically created, DELETE IT ALL (only do so for the purpose of this tutorial).
Step 3: Begin your code, remember to start out with the <html> tag, and a <body> tag. Do not forget to close them as well.
To begin the table, start with the <table> tage and then hit enter and type in the <tr>, hit enter twice. Now put the end tag (</tr>). In the line between the opening and the closing <tr> tags there should be a blank space (see image), this is where you will type the information regarding what is going into the tables.
Step 4: In the line between the <tr> and </tr> type <td> for data table, then type in what you want in the first cell, for this example lets create a multiplication chart starting with the number 2. Type the end tag </td>. See the example. If the design view does not show up try saving it first or clicking on the design side.
Step 5: Now under your first <td> add 3 more <td> consisting of the multiple of 2. When viewing your design you will see the 2,4,6,8 all lined up in a row. You can continue this process to add more information.
Step 6: Now you have 1 row and 4 columns, we want this to be a multiplication chart therefore we need more rows. To do this you end the <tr> that was done in Step 5 and you start another table with a new<tr>. You will do this several times in order to complete the chart. The hardest thing is remembering the times tables. See example.
Step 7: You have now completed the chart! Feel free to add any other HTML code that you know that may enhance your design view. (I added a headed <h1> and gave it a title.
There is a lot more that can be done with this table such as table borders, etc. However, it is not covered in this tutorial. If you would like to know how to create borders as well as more about creating tables you can visit: http://www.w3schools.com/html/html_tables.asp
This tutorial was made possible with help by www.w3schools.com and www.m-w.com.
No comments:
Post a Comment