Monday, 18 June 2018

Chaudhari Karan

HTML – Tables

    No comments:


HTML – Tables

Hello friends, In this lecture, we will discuss HTML tables.
HTML – Tables


The HTML tables used for arrange data like text, images, links, other tables, etc. in rows and columns of cells.

The HTML tables are created by table tag in which create table rows used  the tr tag and create data cells used  td tag.  The elements in tag are regular and left aligned by default.

Example
HTML – Tables


Output
HTML – Tables


The border is the attribute of the table tag. It is used to put a border across all the cells. If you don't want a border, then you can use border = "0".

Table Heading

Table heading is defined by tag. This tag replaces by tag, which is used to represent data cell. Normally put top row as table heading, otherwise can use element in any row. Headings are centered and bold by default.



Example
HTML Table Heading


Output
HTML Table Heading

Cellpadding and Cellspacing Attributes

Cellpadding and Cellspacing are attributes which are used to adjust the white space in table cells. The cellspacing attribute is used to defines space between table cells, while cellpadding is used to distance between cell borders and the content in a cell.

Example
HTML Cellpadding and Cellspacing Attributes


Output
HTML Cellpadding and Cellspacing Attributes

Colspan and Rowspan Attributes

Colspan attribute used for merge two or more columns in a single column. Same as rowspan used for merge two or more rows.

Example
HTML Colspan and Rowspan Attributes


Output
HTML Colspan and Rowspan Attributes

Tables Backgrounds

Set table background use the bgcolor, background, and bordercolor attribute − It is used for the set background color of the table or one cell.

  • background attribute – It is used for the set background image of the table or one cell.
  • bordercolor attribute – It is used for set border color of the table.

Example

HTML Tables Backgrounds


Output
HTML Tables Backgrounds


Here is the example of use background attribute. Here we use the image for a background.

Example
HTML Tables Backgrounds


Output
HTML Tables Backgrounds


Note: background image is not applied to table's header.


Table Height and Width

Set a table width and height use width and height attributes. Table width or height specified in terms of pixels or percentage.

Example
HTML Table Height and Width


Output
HTML Table Height and Width

Table Caption

Set the caption of table use the tag. It shows up at the top of the table.

Example
HTML Table Caption


Output
HTML Table Caption

Table Header, Body, and Footer

Tables have three portions − a header, a body, and a foot. The head and foot are similar to headers and footers, while the body is the main content holder of the table.
  • thead − It is used to create a separate table header.
  • tbody − It is used to indicate the main body of the table.
  • tfoot − It is used to create a separate table footer.

Example
HTML Table Header, Body, and Footer


Output
HTML Table Header, Body, and Footer

Nested Tables

HTML allows using one table inside another table.

Example
HTML Nested Tables


Output
HTML Nested Tables


Subscribe to this Blog via Email :