1. Add a Table
You can insert a table onto your page to organize or control the entire page layout. Tables offer a manageable structure for creating a layout for your page. You can assign different page elements to different cells to control the positioning of elements on the page. Cells can hold text data, images and other Web page elements.
2. Assign a Table Border
You can use table borders to make your cells easier to distinguish and give the table more structure on a page. A table border is simply a line that appears around a table as well as around each cell within the table. By default, a table does not have an actual border unless you specify one. You can use the BORDER attribute to turn table borders on or off. When you set a border thickness, it applies only to the outer edge of the table, not to the cells within the table. Border thickness is measured in pixels. Borders appear gray unless you specify a color.
3.Adjust Cell Padding and Spacing
You can use padding to add space between the border and the contents of a cell. You can use spacing to increase the border size or width between cells. Padding and spacing size is measured in pixels. You can control the positioning of a table on your Web page using the ALIGN attribute. You can use the ALIGN attribute to center a table, or align it or the right or left sides of the page. The ALIGN attribute also determines the way in which text wraps around your table element. For example, if you align the table to the right, text wraps around the left side of the table
4. Adjust Cell Width and Height
You can control the width of a cell using the WIDTH attribute and the height of a cell using the HEIGHT attribute. For greater control, you can specify a width based on a percentage of the browser window, or you can set an exact number of pixels. You can also control the depth of a cell using the HEIGHT attribute. Typically, the content of the cell determines the cell’s width. For example, if the cell contains a long line of text, the cell appears wide enough in the browser window to hold all the text in the cell.
5. Add Column Labels
If you are building a table to populate with data, you can add labels, also called headers, to the top of each column to identify column contents. Any time you want to make your cell text bold and centered, you can use the <TH> tag. For example, if your table lists products and prices, column headers might include labels such as Product Number, Product Name, and Price. Column headers appear in bold type and are centered within each cell. You can also give your table a title using the same <TH> tag..
6. Create Newspaper Style Columns
You can use the table format to present columns of text on your Web page, much like a newspaper. For example, you may want to present your text in a two-column or three-column format. Paragraphs of text are contained within each column. You can use the vertical alignment attribute to make each column align at the top of the table.
7. Add a Table Header
You can add a table header to the top of the table to give your table a title row. Text you type as a table header appears bold and centered. Table headers can help identify the content or purpose of a data table.
8. Add a Table Caption
You can add a caption to your table to help users identify the information contained within the table. Table captions can appear at the top or bottom of the table. By default, captions appear above the table unless you specify another alignment attribute. Captions always appear as a separate line of text from the table.
9. Control Which Borders to Display
Ordinarily when you assign a border to a table, it surrounds the outside of the table as well as separates each cell. You can control which internal and external borders appear in your table using the FRAME attribute. For example, you can turn off the display the entire right side of the table without a border. By controlling which borders appear, you can create a custom table.
10. Adjust the Table Size
When setting a size in pixels, set the value to 600 pixels or less to ensure the table fits on the screen. If you prefer a more flexible table, set the size in percentages. This allows the table to be resized along with any resizing of the browser window. You can control the exact size of the table using the WIDTH and HEIGHT attributes in the <TABLE> tag. You can specify a table size in pixels or set the size as a percentage of the browser window.
11. Span Cells Across Columns and Rows
You can create a large cell in your table by spanning the cell across two or more columns or rows. Spanning cells, also called merging cells, allows you to create unique cell structures within your tables For example, you might include a large cell across the top of a table to hold a heading or an image.