Scribd
Upload
27 views

CSE 102 Introduction To Web Design and Programming: XHTML: Tables

This document discusses HTML tables and their attributes. It covers how to structure tables using <table>, <tr>, <td>, and <th> tags. It also describes various table attributes that control borders, spacing, alignment, width, height, and spanning rows and columns. Examples are provided throughout to demonstrate how to add tables and modify attributes in an XHTML practice file.

Uploaded by

Laura Louis
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
27 views

CSE 102 Introduction To Web Design and Programming: XHTML: Tables

This document discusses HTML tables and their attributes. It covers how to structure tables using <table>, <tr>, <td>, and <th> tags. It also describes various table attributes that control borders, spacing, alignment, width, height, and spanning rows and columns. Examples are provided throughout to demonstrate how to add tables and modify attributes in an XHTML practice file.

Uploaded by

Laura Louis
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 15

CSE 102

Introduction to Web Design


and Programming

XHTML: Tables
Practice file
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<title>My Practice Web Page</title>
</head>

<body>

</body>
</html>
Tables
• <table> is a block element used to:
– present tabular data
– layout Web pages by aligning content & graphics in
horizontal & vertical grids
– organize entries in fill-out forms for user input
• Tables have rows (<tr>), columns, & data (<td>)
– Use <th> for a cell that contains a header for a column or
row
– <td> & <th> may contain any inline and block elements,
including another table (table inside a table)
• Table caption is optional
Ex, add to practice file:
<table border="1">
<caption>A.L. East</caption>
<tr>
<th>Team</th>
<th>Wins</th>
<th>Losses</th>
</tr> A.L. East
<tr>
Team Wins Losses
<td>Yankees</td>
<td>97</td> Yankees 97 59
<td>59</td> Red Sox 93 62
</tr>
<tr>
<td>Red Sox</td>
<td>93</td>
<td>62</td>
</tr>
</table>
Table Attributes
• border="0" would result in no border
– increase number of pixels to increase border thickness
– border outlines table
– border also implies table rules
• cellspacing="10" increases spacing between
table cells
• cellpadding="10" increases spacing inside cells
between cell walls and contents
• Change the border, cellspacing, & cellpadding in
your table
More Table Attributes
• rules="..." attribute allows you to customize rules
– possible values: none, groups, rows, cols, & all
• frame="..." attribute allows you to customize
border or table
– possible values: void, above, below, vsides, hsides,
lhs, rhs, box, & border
• summary="..." attribute is for describing the
purpose & content of a table for non-visual
browsers
• Note: rules & frame are poorly supported by
browsers
Cell Content Alignment
• By default, content in a cell is left aligned horizontally &
middle aligned vertically inside the space for the cell
• align="…" attribute of <tr> specifies horizontal
alignment for all cells in a row
– possible values: left, right, center, justify, & char(e.g. char=”.”)
• valign="…" attribute of <tr> specifies vertical alignment
for all cells in a row
– possible values: top, middle, bottom, & baseline
• To control the alignment of a single cell (separate from
the row), put align or valign inside td or th
• Change your practice file such that Wins & Losses for
each team are right-aligned, while the team name is left
aligned
Table Header & Body
• It’s good practice to separate the table header
from the table body
– use <thead> and <tbody> to do so
– <tfoot> may also be used for a footer
• Allows you to control them separately
• Improves XHTML clarity
Ex, add to practice file:
<table border="1" cellspacing="1" cellpadding="1">
<thead>
<tr align="center" style="background-color:#fc0">
<th>Team</th>
<th>Championships</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td>Yankees</td>
<td>26</td>
</tr>
<tr>
<td>Mets</td>
<td>2</td>
</tr>
</tbody>
</table>
Positioning Tables
• Normally positioned left
• To center:
– align="center"
OR
– style="margin-left: auto; margin-right: auto"
• You may float a table, just like an image
• Ex, change one of your tables:
<table style="float: left; margin-right:1em">
• Then add a paragraph:
<p>The table floats around this paragraph.</p>
Table Width & Height
• Table width & height are automatically computed to
accommodate the contents of the cells
• You may also explicitly suggest table width:
– <table width="..."> attribute
• You may specify a width in pixels, or as a percentage of page
• By default, the width of all cells in a column are equal
– they all have the width of the widest cell
• By default the height of all cells in a row are equal
– they all have the height of the tallest cell
• You may also suggest cell width & height using:
– <td width="..." height="...">
– will affect all other related rows & columns
Add to your practice file
<table border="1" width="60%" align="center">
<tbody align="right">
<tr>
<td style="width:10%">10%</td>
<td style="width:30%">30%</td>
<td style="width:60%">60%</td>
</tr>
</tbody>
</table>
Row & Column Spans
• A table cell can span multiple rows and/or
columns
• For <td> or <th>:
– use rowspan attribute to specify the number of rows
– use colspan attribute to specify the number of
columns
Add to your practice file
<table width="120">
<tr align="center">
<td colspan="2" style="background-color:red">A</td>
<td rowspan="2" style="background-color:cyan">B</td>
</tr>
<tr align="center">
<td rowspan="2" style="background-color:yellow">C</td>
<td style="background-color:green; color:white">D</td>
</tr>
<tr align="center">
<td colspan="2" style="background-color:blue;color: white"> E</td>
</tr>
</table>
Rules between Cells
• You may further specify the rules between cells
– Use style= with border-bottom, top, left, & right
• Specify thick or thin, color, & dashed, dotted, or solid line
• Change A cell in your table to the following:
<td colspan="2" style="background-color:red;
border-bottom:thick #000 dashed;
border-top:thin #000 dashed;
border-left:thick #e34 dotted;
border-right:thin #000 solid">A</td>

You might also like