CWD116: Photography and Web Programming
HTML Tables
HTML tables allow web developers to arrange data into rows and columns.
Example
Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
Define an HTML Table
A table in HTML consists of table cells inside rows and columns.
Example
A simple HTML table:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
CopyRight @ Eugene Tebo January 2023
1
CWD116: Photography and Web Programming
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.
Example
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Note: 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.
Example
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
You can have as many rows as you like in a table; just make sure that the number of cells
are the same in each row.
Note: There are times when a row can have less or more cells than another. You will learn
about that in a later chapter.
CopyRight @ Eugene Tebo January 2023
2
CWD116: Photography and Web Programming
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.
Example
Let the first row be table header cells:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
By default, the text in <th> elements are bold and centered, but you can change that
with CSS.
HTML Table Tags
Tag Description
<table> Defines a table
<th> Defines a header cell in
a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
CopyRight @ Eugene Tebo January 2023
3
CWD116: Photography and Web Programming
<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 table
<tbody> Groups the body
content in a table
<tfoot> Groups the footer
content in a table
Exercises
Exercise:
Add a table row with two table headers.
The two table headers should have the value "Name" and "Age".
<table>
<tr>
<td>Jill Smith</td>
<td>50</td>
</tr>
</table>
CopyRight @ Eugene Tebo January 2023
4