Scribd
Upload
94 views

HTML Project 04 Creating Tables in A Web Site

The document discusses how to create tables in HTML. It provides examples of basic table structure using <table>, <tr>, <td>, and <th> tags. It also covers table properties like alignment, width, cell spacing, and how to create heading rows. The last section demonstrates a sample table with two columns of unequal width and vertically aligned text.

Uploaded by

angela_edel
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
94 views

HTML Project 04 Creating Tables in A Web Site

The document discusses how to create tables in HTML. It provides examples of basic table structure using <table>, <tr>, <td>, and <th> tags. It also covers table properties like alignment, width, cell spacing, and how to create heading rows. The last section demonstrates a sample table with two columns of unequal width and vertically aligned text.

Uploaded by

angela_edel
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 28

Creating Tables in a Web

Site
HTML Project 04
Table Example

Color Style Size

Blue Shirt Medium

White Dress Small


Table Tags
<table>
<tr>
<td> or <th>
 
</td> or </th>
</tr>
</table>
Table Defaults
 LeftAlignment
 No borders
 100% width
Heading Cells
 Bold and Centered
 <th> </th>
Table Example

Color Style Size

Blue Shirt Medium

White Dress Small


Color Style Size
Blue Shirt Medium
White Dress Small

<table border="1">
<tr>
<th>Color</th>
<th>Style</th>
<th>Size</th>
</tr>
Color Style Size
Blue Shirt Medium
White Dress Small
<tr>
<td>Blue</td>
<td>Shirt</td>
<td>Medium</td>
</tr>
 
<tr>
<td>White</td>
<td>Dress</td>
<td>Small</td>
</tr>
</table>
<table border="1">
<tr>
Color Style Size
<th>Color</th>
<th>Style</th> Blue Shirt Medium
<th>Size</th>
</tr> White Dress Small
 
<tr>
<td>Blue</td>
<td>Shirt</td>
<td>Medium</td>
</tr>
 
<tr>
<td>White</td>
<td>Dress</td>
<td>Small</td>
</tr>
</table>
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
<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>
Table Alignments
Horizontal Vertical
Alignment Alignment
Table Left Center
Table Data Cell <td> Left Center
Table Heading Cell <th> Center Center

Defaults:
  If you insert the alignment attribute in the table row

element, both the <td> and <th> tag will inherit the
alignment setting from the <tr> element thus
eliminating having to repeat the alignment attribute in
those tags.
 Use the valign attribute to change the default from

center to top or bottom.


Table Width
 The width attribute can be set using a
percentage or a numerical value. A percentage
value sets the width of the table to a percentage
of the browser window.

 The width attribute can also be used in the TH


or TD elements to set the width of a column.
The attribute only needs to be inserted in one
cell in a column to set the width of all cells
within that column.
Table Width
 Ina table without any width attributes set
in the TABLE, TH or TD elements, column
widths are determined by the width of the
column content.

 If
a WIDTH attribute is only set in the
TABLE element, most browsers apportion
column widths equally so their sum is
equal to the table width.
Equal column width
 <table cols=″5″ width=″100%″>
Default width = 100% Each column width = 20%

 If all columns are not supposed to be equal in


width, remember to set the width of each to equal
the width of the table.
Unequal Column Width
<table cols=″2″ width=″100%″>
◦ First column = 20%
◦ Second column = 80%

<table cols=″2″ width=″85%″>


◦ First column = 15%
◦ Second column = 70%
Table Defaults
 Table width = 100% (no borders; left
horizontal/center vertical alignment)
 Table data cells = 20% and 80%
Table Defaults
 Table width = 80%
 Table data cells = 20% and 60%
Table Defaults
 Table width = 80% with Center alignment
 Table data cells = 20% and 60%
Table Defaults
 Table width = 80% with Center alignment
 Table data cells = 40% and 40%
No Cell Spacing
Table width = 80% with Center alignment
 Vertical Alignment of Data Cells <td> = top
 Width of data cells = 20% and 60%

<table cellspacing="15" cols="2" width="80%" align="center">


<tr>
<td valign="top" width="20%" bgcolor="lightsteelblue">
<td valign="top" width="60%">
</tr>
</table>
Table Defaults
 Table width = 100% (no borders; left
horizontal/center vertical alignment)
Table width = 80%
 <table cellspacing="15" cols="2" width="80%">
 
Table width = 80% with Center alignment
<table cellspacing="15" cols="2" width="80%" align
="center">
 
<tr>
<td width="20%" bgcolor="lightsteelblue"> <a
href="newreleases.htm">New Releases</a>
<p><a href="actor.htm">Browse by Actor</a></p>
<p><a href="type.htm">Browse by Type</a></p>
</td>
 
<td width="60%"><b>Bell Video is the leading video rental
store
in the greater Tukwila area. In addition to our low prices, we
have been
selected for the second year in a row to receive the
prestigious Tukwila
"Excellence in Customer Service" award. </td>
</tr>
Table width = 80% with Center alignment
Table data cells = 40%
 <td width="40%" bgcolor="lightsteelblue">
<a href="newreleases.htm">New Releases</a>
<p><a href="actor.htm">Browse by Actor</a></p>
<p><a href="type.htm">Browse by Type</a></p>
</td>
<td width="40%"><b>Bell Video is the leading
video rental store
No Cell Spacing
Table width = 80% with Center alignment
Vertical Alignment = top
Table data cells = 20% and 60%
Vertical alignment = top

<table cellspacing="15" cols="2" width="80%"


align="center">
<tr>
<td valign="top" width="20%"
bgcolor="lightsteelblue“>

You might also like