HTML Tutorial #4: Create a table in HTML
In the previous tutorial we knew about empty tags further we will create a table in HTML.
Why we use table in HTML ?
=> HTML table is an arrangement of data in columns and rows. In which information can be defined separately.
How to use table in HTML?
Let's go in your Notepad and type:
<!DOCTYPE html>
<html>
<head>
<title> Table </title>
</head>
<body>
<table border="1">
<tr>
<th> table heading </th>
</tr>
<tr>
<td> table </td>
</tr>
</table>
</body>
</html>
save the page with .html or .htm extension then open your browser.
Why we use table in HTML ?
=> HTML table is an arrangement of data in columns and rows. In which information can be defined separately.
How to use table in HTML?
=> HTML tables are created a table using <table> tag in which the <tr> tag is used to create table rows, <th> tag is used to create heading and <td> tag is used to create table cell.
Let's go in your Notepad and type:
<!DOCTYPE html>
<html>
<head>
<title> Table </title>
</head>
<body>
<table border="1">
<tr>
<th> table heading </th>
</tr>
<tr>
<td> table </td>
</tr>
</table>
</body>
</html>
* border="1" is defined for border it can be any digits as you want to display the border in the table. If you skip border and its value no border will be display in HTML table. It is an attribute of table tag.
Attribute: An attribute is a character of page element such as size and color in different values.
save the page with .html or .htm extension then open your browser.
table heading is row 1, column 1
and table is row 2, column 1
If we have to create a student table in which student name and roll no is given.
Open your Notepad and type there:
<!DOCTYPE html>
<html>
<head>
<title> Table </title>
</head>
<body>
<table border="1">
<tr>
<th> Student </th>
<th> Roll No. </th>
</tr>
<tr>
<td> student-1 </td>
<td> 01 </td>
</tr>
</table>
</body>
</html>
Student name is row 1, column 1 Roll no. is row 1, column 2
and student-1 is row 2, column 1 01 is row 2 column 2
Cellpadding Attribute :
=> Used to specify the space between the border of a table cell and its contents.
Cellspacing Attribute :
=> Used to specify the space between cells of a table.
Again go to your Notepad and type:
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
</head>
<body>
<table border="1" cellpading="3" cellspacing="3">
<tr>
<th>Student</th>
<th>Roll No.</th>
<th>marks</th>
</tr>
<tr>
<td>student 1</td>
<td>01</td>
<td>70%</td>
</tr>
<tr>
<td>student 2</td>
<td>02</td>
<td>80%</td>
</tr>
<tr>
<td>student 3</td>
<td>03</td>
<td>90%</td>
</tr>
</table>
</body>
</html>
Colspan Attribute :
=> Used to specify the number of a columns.
Rowspan Attribute :
=> Used to specify the number of a rows.
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
</head>
<body>
<table border="1" cellpading="3" cellspacing="3">
<tr>
<th> Student </th>
<th> Roll No. </th>
<th> marks </th>
</tr>
<tr>
<td colspan="3"> student 1 </td>
</tr>
<tr>
<td rowspan="3"> student 2 </td>
<td> 02 </td>
<td> 80% </td>
</tr>
<tr>
<td> student 3 </td>
<td> 03 </td>
</tr>
</table>
</body>
</html>
</html>
Now, simply you can create a table as per your requirement. Table width, height, background-color, background-image, bordercolor can be changed easily in <table> tag as we written border and its property.
In the part of Cascading Style Sheet (CSS) we will learn about color, size, height, width and more styles in HTML element.
Next tutorial of HTML we will create a form.
Comments
Post a Comment