Working with Tables

html.jpg image

Tables offer a unique way to fold data in a tabular format. With the advent of a Web pages, developers quickly took advantages of table structure to help with complicated page layouts. Although CSS now allows users to create layouts of tables, HTML tables are still a popular way to organize and present Web page data and images. Before you start the task of creating any kind of table, whether it is strictly for data or to control the page layout, stop and sketch out what you want the table to look like and what type of data you want each cell to hold. A little planning beforehand can help you build your table faster and more accurately using the HTML coding.

Table Structure Traditional Tables Presentation Tables
Every table is built on a basic structure of a square containing for borders. Within the table intersecting columns and rows create cells to hold data. Each cell is also surrounded by four borders. You can resize various borders in a table to increase the size of cells. Borders may or may not be visible in the table structure as it appears on the Web page. You can use traditional tables on Web page to present data in a tabular format. For example, you might insert a table to hold a list of products and prices, or display a roster of classes. One way to create a traditional table is to define a set width and depth for the table. When you define an exact size for a table, a user cannot resize the table; the table appears, just as it was created You can use a presentation-style table to showcase your data more dynamically. Instead of defining an exact size, you can specify a table size using percentages. Whenever the user resizes his or her browser window, the table resizes as well. This allows for more “liquid” layout. This type of good for page layouts as well as regular data tables.


HTML Tags for Table Elements
Syntax Description
<TABLE>...</TABLE> Defines the table component
<TR>...</TR> Defines a table row
<TD>...</TD> Defines the table data or cell content
<TH>...</TH> Defines a header cell in a table
<CAPTION>...</CAPTION> Defines a table caption

Steps in adding and formatting tables in your HTML document:

  1. Add a Table
  2. Assign a Table Border
  3. Adjust Cell Padding and Spacing
  4. Adjust Cell Width and Height
  5. Add Column Labels
  6. Create Newspaper Style Columns
  7. Add a Table Header
  8. Add a Table Caption
  9. Control Which Borders to Display
  10. Adjust the Table Size
  11. Span Cells Across Columns and Rows

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.

Go to top