HTML TABLES
Html provides Elements to include tables in your webpage.Tables can be included with <table> tag. Tables are divided into table row using <tr> tag and rows are divided into table data using <td> tag. Table also contain <th> tag to include headings into table.Data in <th> tag will be bold.<td> i.e table data can contain different contents such as text , images ,list etc.
Table Border
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
</head>
<body>
<h2>Here is a table</h2>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Mary</td>
<td>23</td>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
</body>
</html>
Output
Table
Here is a table
Name
Age
Mary
23
John
25
Table Border
By default html does not show border for tables. You have to specify it in your code. To add a border you can use border attribute. You can also use css to make table attractive. The below example uses inline styling to give border to the table.
<table border="1">
Table Cells that Span many Columns
We can use colspan attribute to span a cell to more than one column. Colspan attribute can be added in <td> tag.
Table Cells that span many Rows
We can use rowspan attribute to span a cell to more than one row.
<!DOCTYPE html><br>
<html>
<head>
<title>Css styling</title>
</head>
<body>
<table border="1" >
<caption>Student Details</caption>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Anna</td>
<td>2133122</td>
<td>1490786</td>
</tr>
<tr>
<td>Manu</td>
<td>157848</td>
<td>546373</td>
</tr>
<tr>
<td rowspan="2">Ajay rai <br> pai</td>
<td>343535</td>
<td>896373</td>
</tr>
</table>
</body>
</html>
Output
Css styling
Student Details
Name
Telephone
Anna
2133122
1490786
Manu
157848
546373
Ajay rai
pai
343535
896373
Captions for a Table
<caption> tag can be used to add caption to a table.<caption> tag must be added immediately after <table> tag.The above table shows the caption "Student Details"
0 Comment "HTML TABLES"
Post a Comment