Grade 7 Creating Tables in HTML
Tables in HTML
Tables represent the data in the form of rows and columns. In HTML, a table is created by using the
<TABLE > tag. The <TABLE > tag should be defined inside the <BODY > tag. It is a container tag.
Different kinds of tables can be created by using the following child tags of the <TABLE > tag:
<TR>: This tag is used for defining table rows.
<TD>: This tag is used for defining table data, that is, the data in the cells.
<TH>: This tag is used for defining table headings.
<CAPTION>: This tag is used for defining the title of the table.
Attributes of the <TABLE> tag:
1. BORDER: The BORDER attribute is used to set the border of the table. The default value of the
BORDER attribute is 0. The larger the value, the thicker will be the border. The border size applies only to
the outside table border, the inner cells will have a cell border that is always only one pixel thick.
2. BORDERCOLOR: The BORDERCOLOR attribute is used to give colour to the border of the table. The
value of this attribute can be the name of any permitted color or any value of the color using RGB color
code in hexadecimal notation (like #DDDDFF value is given for light blue color).
3. BGCOLOR: The BGCOLOR attribute is used to change the background color of the table. The value can
be any permitted color name or its HEX equivalent value.
4. BACKGROUND: The BACKGROUND attribute is used in the same way as done with the <BODY> tag.
Just specify the URL or the directory path of the file and the file name as its value in double-quotes.
5. HEIGHT and WIDTH: The HEIGHT and WIDTH attributes are used to set the height and width of the
table. The value can simply be given as 90 or 70 or any other number, as it represents pixels on a computer
screen. The value of these attributes can also be given in percentage, that is, 90%, etc., as it shows that the
table will cover 90% of the area of the browser window.
6. CELLSPACING: The CELLSPACING attribute is used to define the minimum distance between two
adjacent cells in a table. This attribute takes a value in pixels. The default value taken by the attribute is 2.
7. CELLPADDING: The CELLPADDING attribute is used to define the minimum space between the edge
of the cell and the text or data inside the cell. This attribute takes a value in pixels. The default value taken
by the attribute is 2.
Attributes of the <TD >/<TH> tag:
1. ALIGN: The ALIGN attribute is used to set the horizontal alignment of the text in a cell.
2. BGCOLOR: The BGCOLOR attribute is used to give a background color to an individual cell.
3. WIDTH: The WIDTH attribute specifies the width of an individual cell in pixels or as a percentage of the
table width. This will apply to the whole column.
4. HEIGHT: The HEIGHT attribute specifies the height of an
individual cell in pixels or as a percentage of the table width.
This will apply to the whole row.
5. ROWSPAN: The ROWSPAN attribute applies when a s
ingle cell is extended for more than a single row; that is, the
cell spans 2 or more rows instead of 1, as shown in the table.
Here, the cell "Sports" is taking a span of 3 rows and "Martial Arts" is taking a span of 2 rows.
6. COLSPAN: The COLSPAN attribute applies when a single cell is extended to more than a single column;
that is, the cell spans 2 or more columns instead of 1, as shown in the table. Here, the "Name" cell takes a
span of 2 columns.
7. VALIGN: The VALIGN attribute is used to align the position of text in the cell vertically, that is, vertical
alignment. It can take any one of three values: "top", "middle" or "bottom". This is useful when a text has to
be aligned in the case of rowspan.
Attributes of the <TR> tag:
The <TR > stands for Table Row, which is used to start a row and end up with </TR> .It is a container tag.
All the attributes discussed with the <TD> tag can also be used with the <TR> tag, except the WIDTH,
ROWSPAN and COLSPAN attributes.
Example:
<html>
<head>
<title>HTML Table Example</title>
</head>
<body bgcolor="lightblue">
<table border="1" bordercolor="red" bgcolor="yellow" cellspacing="10" width="50%" align="center">
<caption><b>Student Grades</b></caption>
<tr bgcolor="lightgreen">
<th>Name</th>
<th>Subject</th>
<th>Grade</th>
</tr>
<tr>
<td>Alice</td>
<td>Math</td>
<td>A</td>
</tr>
<tr>
<td>Bob</td>
<td>Science</td>
<td>B+</td>
</tr>
<tr>
<td>Charlie</td>
<td>History</td>
<td>B</td>
</tr>
</table>
</body>
</html>
_____________________________________________________________________________________
Example:
<html>
<head>
<title> Spanning </title>
</head>
<body>
<table border=5 >
<tr>
<th colspan="4">Class 10th</th>
</tr>
<tr >
<th rowspan="3">Details </th>
<th>S.No.</th>
<th>Name</th>
<th>Grades</th>
</tr>
<tr>
<td>1</td>
<td>Manas</td>
<td>A+</td>
</tr>
<tr>
<td>2</td>
<td>Dhiraj</td>
<td>A+</td>
</tr>
</table>
</body>
</html>
*****
