HTML WEB DESIGN

 

separator-blank.png

 

GUIDE – TABLES I

 

  • Create a new HTML document called webpage4.html.  It should only have the html template in it.

    Here is my new webpage4.html document with all other docs:

 

 

  • Open the new doc in a text editor.  It should look this this.

 

<html>

<head>

</head>

<body>

</body>

</html>

 

 

  • Let’s add a heading called Page #4.

 

 

<html>

<head>

</head>

<body>

<b><h1>Page #4</h1></b>

</body>

</html>

 

 

·       Let’s consider the 3 tags needed for a table structure.

 

The <table> & </table> tags start and end the structure.

The <tr> & </tr> tags specify the beginning and end of a row.

The <td> & </td> tags specify the beginning and end of a data cell.

 

·       Here are a few other details about tables:

o   The text that appears between each <td> and </td> is what appears in that cell.

o   If there are three pairs of <td> & </td> between one <tr> & </tr>, then that row will have three data cells.

o   To see the border of the table, we need to set the border attribute of the table tag to 1 or more.

 

·       Here are a few example tables.  Spend some time understanding how the <tr> and <td> tags are organized.  Try copying and pasting some of these in your code to see it work.

 

HTML CODE

RESULT

<table border="1">

<tr>

<td>A</td>

<td>B</td>

<td>C</td>

</tr>

</table>

<table border="1">

<tr>

<td>A</td>

<td>B</td>

</tr>

<tr>

<td>C</td>

<td>D</td>

</tr>

</table>

<table border="1">

<tr>

<td>A</td>

</tr>

<tr>

<td>B</td>

</tr>

<tr>

<td>C</td>

</tr>

<tr>

<td>D</td>

</tr>

<tr>

<td>E</td>

</tr>

</table>

<table border="1">

<tr><td>A</td></tr>

<tr><td>B</td></tr>

<tr><td>C</td></tr>

</table>

 

·       In webpage4.html, add the HTML code required to create the following table:

 

 

Try not to look below before trying on your own.

Below, you see two identical solutions where the tags are organized differently.  You pick the one you like.

 

<html>

<head>

</head>

<body>

<b><h1>Page #4</h1></b>

 

<table border="1">

<tr><td>A</td><td>B</td></tr>

<tr><td>C</td><td>D</td></tr>

<tr><td>E</td><td>F</td></tr>

</table>

 

</body>

</html>

<html>

<head>

</head>

<body>

<b><h1>Page #4</h1></b>

 

<table border="1">

<tr>

<td>A</td>

<td>B</td>

</tr>

<tr>

<td>C</td>

<td>D</td>

</tr>

<tr>

<td>E</td>

<td>F</td>

</tr>

</table>

 

</body>

</html>

 

 

Test your page.  Take your time to understand how the structure is organized.

 

GOT EXTRA TIME?

 

·       Can you alter your table from above to make this one?

 

·       Can you make this table (muhahaha)?