As you develop your skill with tables, your skill to lay out well-designed web pages will also grow.
explanation video

1. Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag).

The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.”
- www.w3schools.com

Notice that the tags are nested. The <table> tags enclose both other sets of tags:

<table>

<tr>

<td>row 1, cell 1</td>
<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>
<td>row 2, cell 2</td>

</tr>

</table>

 

You would need to style it like this:

 

		<style>
		table, td { border-style: solid;
			    border-width: thin;
		}
		</style>

 

How it looks in a browser:


row 1,cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

2. It is very important to understand that one builds a table with rows and cells.

3. For borders, read this and this. For the other properties, study the examples in the Tables section of the w3schools tutorials.

4.To align text within cells, you can style td (or td, th) with text-align:center or text-align:left. You can also center it in an up-down direction with vertical-align:top (or middle or bottom).

Study the CSS Tables page from W3schools. It has more details than the tutorial page linked to above.

Please read in W3Schools until you know how to do each of the following. You will need these skills for the project:

  • A table with no border
  • A table with a border
  • Headings (th) in a table
  • A table with a caption
  • A table with cells that span more than one row
  • A table with cells that span more than one column
  • A whole element inside a table cell
  • Border-collapse
  • Text alignment
  • Cell padding
  • Link two files

Project 6: Due Date: Friday, 5/3/24: Create two tables, using the above-listed skills:

Use two different html files for the two tables in the assignment.

It will actually be easier to work that way, because you can use different style rules in each file.

Please link them. For example, assume you have tested your first file and then moved the contents from index.html to a new file named table_one.html. The you create your second file, test it and leave it in index.html. The place a link in the index.html file that goes to "table_one.html" or whatever you named it.

Style the tables, using internal style. 

Your task is to exactly recreate each of the below tables on your own.

Table 1
table about dogs
Table 2
table about sizes

Hint: for the small lists of Tinker Bell, etc, you can put them in a p element with some <br> at the ends of lines and some &nbsp; at the start of lines.

Another hint: td {vertical-align:top;} will cause the content of every td to be located at the top of the cell, rather than the center.

Rubric

Category minus 15 points minus 10 points minus 5 points Full points
Project Requirements Got most of the attributes right, table is just missing a few things compared to the screenshot Got almost all the attributes right, table is just missing 2-3 things compared to the screenshot Got almost all the attributes right, table is just missing 1 thing compared to the screenshot Got all the attributes right, table exactly matches the screenshot
Skills demonstration Student shows example(s) of most of the skills listed above. Student shows example(s) of all except 2 or 3 of the skills listed above. Student shows example(s) of all except 1 of the skills listed above. Student shows example(s) of all 11 skills listed above.
Code Quality Code doesn't run as expected and shows they did not study or understand the learning resources Code displays somewhat as expected, minimal understanding of learning resources Uses somewhat appropriate syntax and correct features. Well formatted, basic understanding of learning resources Easy to understand. Uses appropriate syntax and features to accomplish the task. Shows they studied and understood the learning resources very well
Code Style Code is very hard to read and understand, follows almost no styling guidelines, inconsistent and causes errors Code is not very readable or consistent, but follows some styling guidelines, some errors Code is fairly readable and consistent, but does not follow all styling guidelines, minimal errors Code is readable and follows all styling guidelines, no errors