Home » » table tag in html

table tag in html

 table tag in html

Table tag <table>

A table is an arrangement of vertical columns and horizontal rows. The intersection of a row with a column is called a cell. We can add just about anything inside the cells like links, images, headings, paragraphs and lists etc. The creation of a table in HTML is very simple and easy. A table in HTML begins with <table> and ends with </table>. Between these tags <tr> and </tr> is used to specify rows. <td> and </td> is used to specify a cell.

The table element can contain the following:

<CAPTION>: Caption can be used to specify a title for the table. The CAPTION element, by default is center-aligned at the top of the Table. It‟s ALIGN attribute that takes value left, right, center can be used to align the caption. The <CAPTION> tag should appear inside <TABLE>

<TR>: Table row, is to specify the row in the table. It holds-
<TH>: Table Heading and
<TD>: Table Data.
<TH>: Table Header, is used for giving Heading to Table. By default header elements contents display the text in bold and centered.
<TD>: "Table Data,” within the row you create columns by <TD> tag. The Table data can contain text, images, lists, forms and other element. The TD is a true container that can hold other HTML elements, even more tables.

Example A Simple table in HTML:

<HTML>
    <HEAD>
        <TITLE> SIMPLE TABLE IN HTML </TITLE>
    </HEAD>
    <BODY>
        <TABLE>
            <CAPTION> TEST TABLE </CAPTION>
            <TR>
                <TH> Heading 1</TH>
                <TH> Heading 2</TH>
                <TH> Heading 3</TH>
            </TR>
            <TR>
                <TD> Cell 1 </TD>
                <TD> Cell 2 </TD>
                <TD> Cell 3 </TD>
            </TR>
            <TR>
                <TD> Cell 4 </TD>
                <TD> Cell 5 </TD>
                <TD> Cell 6 </TD>
            </TR>
        </TABLE>
    </BODY>
<HTML>

After write the above code save the page and open it in your browser.

Attributes of <TABLE>

If you do not specify a border attribute, the table will be displayed without borders. Most of the time, we want the borders to show in a table.

To display a table with borders, specify the BORDER attribute. BORDER is used to draw borders around all the Table cells. By default, tables are shown without borders i.e. BORDER=0. The size of border can set by assigning an integer value. For example BORDER=3, gives table a three pixel border.

ALIGN: Used to align a table relative to windows border. It can set to left, right or center.

CELLSPACING: Used to set the space between the cells in a table. It takes value in pixel.

CELLPADDING: Used to set the space between the cell data and cell wall in a table. It takes value in pixel.

WIDTH: Used to set the width of the table, as either an absolute width in pixels, or a percentage of the document width. For example:

WIDTH=<width in pixel or percent>

BGCOLOR: Set the background color of the table.
For Example: BGCOLOR=red,

BORDERCOLOR: Set the color of the border of the table.
For example: BORDERCOLOR=BLUE

Example:

<HTML>
    <HEAD>
        <TITLE> Simple table border</TITLE>
    </HEAD>
    <BODY>
        <TABLE BORDER="1">
            <TR>
                <TD>row 1, cell 1</TD>
                <TD>row 1, cell 2</TD>
            </TR>
            <TR>
                <TD>row 2, cell 1</TD>
                <TD>row 2, cell 2</TD>
            </TR>
        </TABLE>
    </BODY>
</HTML

Example: Use of <TABLE> attributes:

<HTML>
    <HEAD>
        <TITLE> A SIMPLE TABLE IN HTML </TITLE>
    </HEAD>
    <BODY>
        <TABLE BORDER=3 BGCOLOR=BLUE BORDERCOLOR=YELLOW CELLPADDING=5 CELLSPACING=5 ALIGN=CENTRE>
        <CAPTION> TEST TABLE </CAPTION>
            <TR>
                <TH> HEADING 1</TH>
                <TH> HEADING 2</TH>
                <TH> HEADING 3</TH>
            </TR>
            <TR>
                <TD> CELL 1 </TD>
                <TD> CELL 2 </TD>
                <TD> CELL 3 </TD>
            </TR>
            <TR>
                <TD> CELL 4 </TD>
                <TD> CELL 5 </TD>
                <TD> CELL 6 </TD>
            </TR>
        </TABLE>
    </BODY>
</HTML>

You can also use the height and width attributes to define the size of individual cells. Just include the attributes in the <TD> tag of the cell that you want to size.

0 মন্তব্য(গুলি):

একটি মন্তব্য পোস্ট করুন

Comment below if you have any questions

Contact form

নাম

ইমেল *

বার্তা *