10
How to make tables in HTML By Daniel Arze

How to make tables in HTML By Daniel Arze. How do they do this?

Embed Size (px)

Citation preview

Page 1: How to make tables in HTML By Daniel Arze. How do they do this?

How to make tables in HTML

By

Daniel Arze

Page 2: How to make tables in HTML By Daniel Arze. How do they do this?

How do they do this?

Page 3: How to make tables in HTML By Daniel Arze. How do they do this?

Requirements and tools

Familiarity with some HTML Notepad Web Browser

Page 4: How to make tables in HTML By Daniel Arze. How do they do this?

Quick HTML sample page

We are assuming that you already know the meaning of the following code to start a basic HTML page

<html>

<title> </title>

<body bgcolor="white" text="black">

</body>

</html>

Page 5: How to make tables in HTML By Daniel Arze. How do they do this?

Making a table in HTML

First insert the <table border> tag after the opening <body> tag. (This tells the computer that we will be creating a table and that it will have a border)

<body>

<table border>

</body> Next insert a <td> tag followed by your data and close it </td> (This tells

the computer that we are going to enter data in the first cell)

<body>

<table>

<td> Our first cell </td>

</body>

Page 6: How to make tables in HTML By Daniel Arze. How do they do this?

Creating cells

To make another cell repeat the previous step (This creates the cells side by side, from left to right, feel free to add more)

<body>

<table border>

<td> Our first cell </td>

<td> Our second cell </td>

<td> Our Third cell </td>

</body>

Page 7: How to make tables in HTML By Daniel Arze. How do they do this?

Creating rows

To make a row insert a <tr> tag and close it at the end of the cells with the </tr> tag

<table border> <td> Our first cell </td> <td> Our second cell </td> <td> Our Third cell </td> <tr> <td> Second row 1st cell </td> <td> Second row 2nd cell </td> <td> Second row 3rd cell </td> </tr></body>

Page 8: How to make tables in HTML By Daniel Arze. How do they do this?

Finishing the table

To insert additional cells and rows just follow the previous step.

Once you are finished inserting all the cells and rows, all you need to do in order to finalize the table, is to close it with the </table> tag at the end and before the </body> tag.

Page 9: How to make tables in HTML By Daniel Arze. How do they do this?

The entire HTML code

<html><title> </title><body bgcolor="white" text="black"> <table border> <td> Our first cell </td> <td> Our second cell </td> <td> Our Third cell </td> <tr> <td> Second row 1st cell </td> <td> Second row 2nd cell </td> <td> Second row 3rd cell </td> </tr> </table></body>

Page 10: How to make tables in HTML By Daniel Arze. How do they do this?

Saving and displaying

Save the page with the HTML extension and you are ready to view your table in any browser.

Here is our sample:

www.gl.umbc.edu/~darze1/table.html