Things You'll Need:
- HTML text editor, such as BBEdit or Dreamweaver
-
Step 1
Open a document in an HTML text editor, such as BBEdit or Dreamweaver. Enter the opening <table> tag. This is the initial element that begins your table.
-
Step 2
Specify the width, border, cellspacing and cellpadding within the opening <table> tag. The width dictates how wide your table is; the border indicates the thickness of the table's outline; the cellspacing specifies the area around the table's cells; and the cellpadding outlines the space around the table's text. For example: <table width="400" border="1" cellspacing="5" cellpadding="3">
-
Step 3
Enter a summary within the <table> tag. The summary is a description of what your table contains and is necessary to provide information to those viewers who use a screen reader. For example: <table width="400" border="1" cellspacing="5" cellpadding="3" summary="This is a demonstration HTML table">
-
Step 4
Enter the caption of your table and specify its alignment, such as top or bottom, according to your preference. For example: <caption align="top">Sample HTML Table</caption>
-
Step 5
Enter the opening <tr> tag to add your first table row.
-
Step 6
Enter the opening <th> tag, add the text of your column heading, and enter the closing </th> tag. This tag gives the table a column and makes the text bold to indicate it is a column title.
-
Step 7
Enter the amount of columns and column headings you require. For example, a table with 3 columns is entered as: <th>Column 1</th><th>Column 2</th><th>Column 3</th>
-
Step 8
Enter an opening <tr> and <td> tag, add the table's data and enter the closing </td> and </tr> tags. A table with 3 columns will have 3 opening and closing <td> tags so that each table data corresponds to a space under a column heading. For example: <tr><td>Row 1, Column 1</td><td>Row 2, Column 2</td><td>Row 3, Column 3</td></tr>
-
Step 9
Enter the closing </table> tag to complete your table.
