HTML Table

0 94

HTML Creating Formatting Table Border Attributes Alignment Size Width

in this tutorial we will learn about HTML Creating Formatting Table Border Attributes Alignment Size Width and Table Headings,Tables for Page Layout HTML Table with Cell Padding

HTML Creating and Formatting Table

The table in a html website allows a user to view data in a structured and classified format. This data can be in any format and type such as links text images and others tables. A web designer can create a table to display timetable financial reports and so on.
A table is made up of row and columns.The intersection of each row and column is called as a cell. A row is made up of a set of cells that are placed horizontally. A column is made up of the set of cells that are placed vertically.
By using the <table> elements in html a user can represents data in tabular format.<tr> element divides the table into rows and the <td> element specifies columns for each row.

HTML Table with a Border Attribute

In HTML by default a table does not have any border, to define a border with table border attribute used with the <table> element. if you will not define a border then it will display a table without the border.

Table Headings

To specify a heading for each column of a table in html <th> element used. using <th> element with text appears in bold.

Colspan Attribute

A web designer might feel the need to span two or more cells in html tables. Spanning refers to a process of extending a cell across multiple rows or columns. colspan attribute of the <td> and <th> elements used to span two or more columns. The colspan attribute allows the user to span a cell along a horizontal row. The value of the colspan attribute specifies the number of cells across which a specific cell shall be expanded.

Rowspan Attribute

Using a rowspan attribute will span a data cell across in two or more rows. It allows the user to span a data cell along a vertical column. Like the colspan attribute, the rowspan attribute can be used within the <td> and <th> elements.

Horizontal Alignment

alignment determines the positioning of the text along the right left or center positions.by default data in a table is aligned on the left side of the table cell. Might be a user need to align data in some others positioning to perform this alignment html deprecated 4 align attributes for horizontal alignment and they are.

left
left attribute to align the data left the side of the table cell and it is the default value for table content.

center
center attribute aligns the data in center side of the table cell and it is the default value for table headings.

right
right attribute align the data on right side of the table cell.

justify
justify attribute aligns the data within the cell by adjusting the text at the edges. text-align attribute used to set the alignment with style for horizontal alignment.

Vertical Alignment

In earlier version user used valign attribute for vertically align for data positioning. HTML5 has deprecated the valign attribute. The possible values of vertical alignment are as follows:

top
top aligns the data vertically within the cell at the top.

middle
middle align the data vertically within the cell at the center .

bottom
align the data vertically within the cell at the bottom.

text-align attribute used to set the alignment with style for vertical alignment.

Caption Element

In html, table user can give heading to a table.To define the main heading for your tablet <caption> element used.This element will define a caption for your tablet. <caption> element is a sub-element of the <table> element. It must be present immediately after the <table> tag. Unlike the <th> element that is used to specify a heading to an individual row or column, the <caption> element allows the user to specify a title for your entire table. There can be only one caption for a table.

Table Size and Width of a Column

The user can set any size of his/her table in html while creating the website. the user can use <style> section to set the default width for the table to 100% of the browser window.to set a width of the column in pixels <td> tag use with style attribute.

Merging Table Cells

For example, if the user wants to change the cells of a table into a different height and width then colspan and rowspan attributes are used.

Apply Borders by Using Styles

The user can add the border to table by using CSS and it is best and reliable method . You can format the the table by using style based border for <table> and <td> tags. To evaluate the attributes used are as follows:

1: The border-width attribute is used to control the thickness of the border and the values are specified in pixels.

2: The border-color attribute is used to control the color of the border and specifies the color by either name, or RGB value, or hexadecimal number.

3: The border-style attribute is used to control the line style. Users can choose between solid, dashed, groove, dotted, outset, ridge, inset, or none.

HTML Table with Cell Padding

To add space between the cell content and its border CSS padding property used. you can add inline CSS style padding property in your document or can define in the separate CSS file.

HTML Table with Border Spacing

Specify the space between cell use CSS border-spacing property.

Tables for Page Layout

These days many developers using new techniques for developing attractive web pages. Tables are used for structuring the content.in other words, we can say a user can arrange data horizontally or vertically according to his/her requirements.

Comments

comments

Leave A Reply

Your email address will not be published.