Table
Table
LESSON 3
HTML TABLES
Allow web developers to arrange data into
rows and columns.
Consist of table cells inside rows and
columns.
TABLE CELLS
Each table cell is defined by a <td> and a </td> tag.
Td stands for table data.
Everything between <td> and </td> are the content of
the table cell.
A table cell can contain all sorts of HTML elements:
text, images, lists, links, other tables, etc.
TABLE ROWS
Each table row starts with a <tr> and ends with
a </tr> tag.
Tr stands for table row.
You can have as many row as you like in a
table; just make sure that the number of cells
are the same in each row.
TABLE HEADERS
Sometimes you want your cells to be table header
cells. In those cases use the <th> tag instead of the
<td> tag:
Th stands for table header.
By default the text in <th> elements are bold and
centered, but you can change that with CSS.
TAG DESCRIPTION LE
AB
<table> Defines a table L T
TM
<th> Defines a header cell in a table H GS
<tr> Defines a row in a table TA
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for
formatting.
<col> Specifies column properties for each column within a
<colgroup> element
<thead> Groups the header content in a group
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
HTML TABLE SIZES
HTML tables can have different sizes for
each column, row or the entire table.
Use the style attribute with the width or
height properties to specify the size of a
table, row or column.
HTML TABLE WIDTH
To set the width of a table, add the
style attribute to the <table> element:
Example: <table
style=“width:100%”>
To set the size of a specific column, add the style attribute on a <th> or <td> element:
<table style=“width:100%”>
<tr>
<th style=“width:70%”>Firstname</th>
<th>Lastname</th>
M
<th>Age</th>
</tr>
L U
<tr>
CO
<td> Eva </td>
L E
<td>Vin </td>
AB
<td>20 </td> </tr>
L T
<tr> <td> Jill </td>
T M
<td>Jack</td>
<td>67</td>
H
</tr> </table>
<HTML>
<head><__1__>HTML LIST</Title>
<__2__><body>
<__3__ type=__4__>
<li>__5__
<ul __6__=__7__>
<li>2-1
<__8__>2-2
<li>2-3
<li>2-4
<__9__>
<li>SUBJECTS
<li>ROOM
<li>__10__
<HTML>
<head><___1__>HTML LIST</Title>
<__2__><body>
<___3__ type=___4__>
<li>___5__
<li>ROOM
<li>_____6__
<ul type=____7__>
<__8__>2-1
<li>2-2
<li>2-3
<li>2-4
<___9__>
<li>__10