HTML Tables: Designing and Using Tables

Unique Elements of Tables in HTML

• <table>: The main tag containing all other tags used in a table.

• <td>: Stands for table data and refers to cells in the table.

• <tr>: Stands for table row.

• <th>: Stands for table header.

• <caption>: Adds a caption to the table.

• <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.

Creating a Table in HTML

• Open Notepad++ and change the doc type to HTML.

• Add a title to the page called Tables and your name in the <title> tag.

• In the body tag, add the <table> tag and necessary components.

• Save the document as Tables.

Adding Borders to Tables

• Use an inline style tag to add a border to the table.

• Remember to always close your tags.

• Use some CSS within the document (the CSS at the top) and some inline CSS as well.

Editing Borders

• Use the code (border-collapse: collapse) to make the border look like the image on the right.

• Use the border-color style code to change the colour of the borders.