Html Tables Rows Columns And Cells

HTML Tables can be used to arrange content on a web page. In the past, using tables was the only practical way to achieve a custom page layout. In today’s web page development, you have alternatives such as using div elements and CSS.

However, many web developers still prefer to use tables for customizing the layout of their pages. Tables may seem difficult at first, but after working through this tutorial and some practice, you will quickly become familiarized with them.

The table Element

A table is divided into rows (element), and each row is divided into cells (element). Theelement is used to store “table data”.

Aelement can contain text and other HTML elements such as links, images, and even other tables. Here is an example of a basic table.

Cell 1A	Cell 1B
Cell 2A	Cell 2B

Table Headers

Table headers can be used if you want to specify that a row in the table should be treated as a header. Header information in a table is defined with theelement.

Modern browsers apply different formatting to your header elements. Alternatively, you can use CSS to apply your own custom settings.

Col A	Col B
Cell 1A	Cell 1B
Cell 2A	Cell 2B

Spanning rows and cells

Just as you would with a spreadsheet document, there will be instances where you need to span multiple rows or cells.

You can do so by using the rowspan and colspan attributes in theelement. Here is an example.

Col A	Col B	Col C
Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
	Row 2 Cell 2	Row 2 Cell 3
Row 3 Cell 1

Padding and Spacing

You can use the cellpadding and cellspacing attributes to adjust the white space on your tables. Although using CSS is the preferred method.

Spacing will affect the distance between the cells, while padding affects the distance between cell borders and the content within the cell.

Cell 1A	Cell 1B
Cell 2A	Cell 2B

Table Captions

Theelement defines a table caption. This element must be inserted immediately after the starting

tag. You can specify only one caption per table. By default, the table caption will be center-aligned above a table.

However, you can use the CSS properties text-align and caption-side can be used to align and place the caption. Table captions are supported by all modern browsers. Here is an example.

Table #1

Cell 1A	Cell 1B
Cell 2A	Cell 2B

Grouping Columns Together

The andelements can be used to group columns in a table for formatting. This is helpful when you need to format one or more columns rather than applying a style for each cell in each row. Here is an example.

     

Cell 1A	Cell 1B	Cell 1C
Cell 2A	Cell 2B	Cell 2C

Cell 1A	Cell 1B	Cell 1C
Cell 2A	Cell 2B	Cell 2C

Table Headers, Body, and Footer

The,, andelements can be used to group rows within a table, much like the colgroup and col elements. These elements establish a header, body, and footer section in your table.

Browsers can use these elements to treat each of these sections independently. Using these elements is also very helpful when formatting rows. Here is an example of its use.

  

Product	Cost
Book	$20.00
Magazine	$5.00
Total	$25.00

Tables appear to be a bit complicated when compared to other HTML elements. However, they are still very useful when you need to display data in an organized fashion.