| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!

View
 

Web10Tables

Page history last edited by c 14 years, 6 months ago

Tables Page Web 1.0 Site

What am I going to learn to do?

On this page,you will learn how to add Tables to a web page using HTML.

 

What software/tools will I use?

Notepad

Web Browser

 

What are the ideas I will work with?

You can make a table with columns and rows in HTML

You can change the border size and color

You can organize and display information in a table.

This page has good information: http://w3schools.com/html/html_tables.asp

 

How do I do it?

Make a page in HTML with a Head, title and body inside the HTML tags.

In the title, put <title>Tables - First Name Last Initial</title>

On the first line of the Body, put <h1>Tables Page - First Name Last initial </h1>

 

Make a table using this code:

<TABLE>

     <TR>

          <TD> Top left cell </TD>

          <TD>  Top right cell </TD>

     </TR>

     <TR>

          <TD> Bottom left cell </TD>

          <TD> Bottom right cell </TD>

     </TR>

<TABLE>

This will give you a tabel with two rows, and two cells in each column.

 

Make a header row

If you use <TH> and </TH> for the top row, you will find that the text inside is bolded.

This can be handy when you want to have a heading on the column.

 

Change the number of columns

As you add more TDs in the row, your table will expand to the right.

Change the number of rows

As you add more TRs, a new row will be added for each.

 

Modifying the <TABLE> tag

You can do lots of modifications to the table by adjusting the TABLE tag.

Change the size of the border, add BORDER="10" experiment with various numbers

Change the amount of empty space around your data, add PADDING="2" experiment with varous numbers

 

You can add a caption to the table with the <CAPTION> tag. A caption will sit above the table, this is useful as a title for the table.

 

Make a table that lists out your first and second semester schedule.

List the period numbers on the left,

Have a TH that has Period, Semester one, Semester two

Change the border size, color of the table

Add a caption

 

Checklist:

  • HTML page structure
  • Title with page name and your name (first name and last initial only )
  • Heading with page name and your name (first name and last initial only)
  • Table with at least four cells, experiment with border, color, adding data
  • Table with your schedule
  • Use TH, BORDER, CAPTION, BGCOLOR

Comments (0)

You don't have permission to comment on this page.