Till now we have learned that the content of a web page is organized as paragraphs and by giving appropriate header text. The web page data can also be organized in rows and columns using HTML Table. This will help you is displaying data like students details, products lists, company’s annual financial statements etc.
HTML table tag helps you create columns, give a caption to the table, define the headings of columns and fill the cells of a table with data. The layout of the table can also be enhanced to make the page look attractive by coloring the cells and setting the proper padding and spacing for cell data.
Tables can also be used to organize images, text, menus and navigational elements of a website.
Syntax of TABLE Tag
Table is a container tag that contains data in rows and columns. Rows are created using <TR> Tag. Each cell in a row is created using <TD> Tag. TR and TD are always enclosed inside <TABLE > Tags
<TABLE attribute list> rows and cells </TABLE>
Features of HTML Table
- HTML Table tag is a mandatory paired tag.
- An HTML table is made up of rows and columns
- The rows and columns intersect to define an element where the content is added. Each of such elements is called a Cell.
- Cells can be combined together across rows of columns by using rowspan and colspan in cols and rows respectively.
- Table in HTML are created one row at a time. Each row is made with cells equal to the number of columns of the table. Rows are created from left to right. Columns are created from top to bottom.
- A table always appears in a square or rectangle shape.
Attributes of TABLE Tag
BORDER
Border is the outline around the table that represents its boundary. By default a table is created without a visible boundary. BORDER attributes take an integer value in pixels to define the width of the line created as border of the table. When this attribute is set it also defines the border of all the cells of the table.
ALIGN
The tables can be placed according to the presentation needs of a webpage. ALIGN attribute take any one value from LEFT, RIGHT or CENTER to render the page relative to the browser window. By default table will be aligned to left.
WIDTH
The WIDTH attribute of the HTML Table tag is used to define the width of the table. The width can be an integer value of pixel count. It can be defined as percentage of the page or the container element. If this attribute value is omitted, the table width will automatically expand to adjust the text.
If you define the width in pixels in the web page and is opened in a smaller device like a smart phone or a tablet, table’s size will not adjust with the smaller device window. Width in percentage will adjust the table with the changing size of the device window.
CELLPADDING
To improve readability of the text in a table cell, the contents of the cells must have some white space from the border of cell. This space between cell content and cell boundary is called cellpadding. By default Cellpadding is 1 pixel from all the four edges of a cell. You can set the value in pixels as per your design needs.
CELLSPACING
Cellspacing defines the separation between the borders of the cells of a table. By default each cell is separated by 2 pixels from all sides of its neighboring cells. You can control this cell space by setting appropriate value in pixels.
BGCOLOR
This HTML Table attributes is used to set the background color for the complete table. The color can be set to a hexadecimal value or a color by name.
BACKGROUND
The background attribute of HTML table is used to render an image as the background of the table. The image is set by giving the absolute or relative path of image file name that is the URL of the file. The text of the table given in the table cells is rendered on the image. An image smaller than the table area is tiled in the complete area of the table. A image bigger than the table area will be cropped
FRAME
The border attribute is used to set the outer and inner borders of a table. If you need to display only the outer border of the table then FRAME attribute is used. If both Border and Frame attributes are used browser will consider Frame attribute over Border attribute. The allowed values for FRAME attribute are VOID, ABOVE, BELOW, HSIDES, VSIDES, LHS or RHS.
RULES
The rules attribute is used to set the inner borders of a table. If both Border and rules attributes are used then browser will consider RULES attribute over BORDER attribute. The allowed values for rules attribute are NONE, COLS, ROWS, ALL or GROUPS.
