How to Create a Table Grid

By Laurianna Callaghan

A table grid for a website can be created in an HTML editor or in Notepad. Grids are made up of table borders that surround each side of a cell. Grids can be used for making lists of items or for printing homemade graph paper. The size of the squares a grid creates is dependent upon the size of the table cells. A table must be created to create grid lines. The grid itself is actually the borders around the table.

Step 1

Click "Start," type "Notepad" in the search text box and press the "Enter" key. This will open the Notepad application.

Step 2

Type the following lines, pressing "Enter" after each entry:

A Table Grid

Step 3

Type "

" and press "Enter." This is where the grid is created. The "border" command makes the grid border two pixels thick. The "bordercolor' command indicates which color to use for the border. In this case, the border color is black.

Step 4

Type the following, pressing "Enter" after each line:

Step 5

Save the file as "gridtest.html" and close the file. Open a browser such as Internet Explorer or Firefox. Choose "File" and then "Open." Navigate to the gridtest.html file and choose "OK."

Tips & Warnings

  • The "bordercolor" command is followed by a pound sign (#) and a six-digit number consisting of numerals and/ or characters. This number indicates to the browser which color to display. Six zeros indicate black and six nines indicate gray. This six character code is called hexadecimal. For more colors, see the "Resources" section.
  • The "width" command can be added to the "" tag, however, it has been deprecated and may not show on some browsers. The "" command can resize cells and is supported by all major browsers.