Tabulating items
Adv. of Tables: Better readability More flexibility More efficient to explain information than plain text
What are the questions we need to ask ourselves?
What is the tag for that? <table>…</table>
What else? A Table must have rows and each of the rows
must be divided into cells add a row
<tr>…</tr> add a cell (column)
<td>…</td>
That’s it! Let’s build a simple table then…with 2 rows and 2 cells in each row
How to create HTML Tables?
<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>
Code to create HTML Table
row 1, cell 1
row 2, cell 2row 2, cell 1
row 1, cell 2
row 1, cell 1
row 2, cell 2row 2, cell 1
row 1, cell 2
Sometimes, this looks nice. But sometime, you may need the actual lines
<table border=“1”><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>
Actual lines = border (attribute)
row 1, cell 1
row 2, cell 2row 2, cell 1
row 1, cell 2
How can I add borders?
Width of the borders
How about headings in this table?
row 1, cell 1
row 2, cell 2row 2, cell 1
row 1, cell 2
Heading 1 Heading 2
<table border=“1”> <tr>
<th>Heading 1</th>
<th>Heading 2</th></tr><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>
Tag for heading??
<th> … </th>
cell content is made bold and centered
Spanning rows and columns A spanning cell is a single cell that occupies more
than one row or one column in the table
Attributes COLSPAN: allows a cell span multiple columns ROWSPAN: allows a cell span multiple rows
More design of tables
fruits
apple orange
ContactPhone
Fax
COLSPAN: allows a cell span multiple columns
example <table border=“1”>
<tr>
<td colspan=“2”> fruits </td>
</tr>
<tr>
<td> apple </td>
<td> orange </td>
</tr>
</table>
How to create column span?
fruits
apple orange
fruits
apple orange
<th
</th>
ROWSPAN: allows a cell span multiple rows
example <table border=“1”>
<tr>
<th rowspan=“2”> contact </th>
<td> phone </td>
</tr>
<tr>
<td> fax </td>
</tr>
</table>
ROWSPAN
Creating a Table Caption
To create a table caption, add the caption element directly below the opening <table> tag with the syntax
<caption> content </caption>
where content is the content of the table caption you want to display in the webpage
<caption> … </caption>
example<table border=“1”>
<caption> My contact info </caption>
<tr>
<th rowspan=“2”> contact </th>
<td> phone </td>
</tr>
<tr>
<td> fax </td>
</tr>
</table>
Caption code
Positioning a Table Caption
By default, table captions are placed at the top
Change the placement using “align” attribute
<caption align =“position”> content </caption>
where position can betop / bottom / left / right
Cellpadding
To define the padding within table cells, add the attribute
<table cellpadding="value"> ... </table>
to the table element, where value is the size of the padding space in pixels
Formatting Table appearance (contd.)
Cell spacing The amount of space between table cells is
known as the cell spacing
Cellspacing
To define the space between table cells, add the attribute
<table cellspacing="value"> ... </table>
to the table element, where value is the space between table cells in pixels
Width and Height of Table
To set the width of the table to a specific value, add the width attribute
<table width="value"> ... </table>
the height attribute
<table height="value"> ... </table>
Formatting Table Borders with HTML Attributes
A table frame specifies which sides of the table (or which sides of the table cells) will have borders
<table border ="value" frame ="type"> ... </table>frame values
above
below
border
hsides | lhs | rhs
vsides
void
Formatting internal gridlines
A table rule specifies how the internal gridlines are drawn within the table
<table border ="value" rules ="type"> ... </table>
Table Border Color
The borders can be colored using bordercolor attribute
<TABLE BORDER=“10” BORDERCOLOR=“RED”>
By default, browsers horizontally center the contents of table header cells and left-align the contents of table data cells
But what if we want center-alignment of content?
Formatting cell content
Marcia Carol Greg
Jan Alice Peter
Cindy Mike Bobby
Formatting Tables with HTML Attributes
To control the horizontal alignmentalign="position“
To control the vertical alignmentvalign="position“
position = top / middle / bottom
Color in a table
What if you want to color the table cells? Apply attribute bgcolor=“value” to the <td>
tag
What if you want to change the text color?<td BGCOLOR=“red">
<FONT COLOR=“blue">Blue Stars</FONT></td>
Top Related