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=BLUEExample:
<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>
</HTMLExample: 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