Html table is defined by <table> tag.
<tr>: table row
<th> : table heading
<td>: table data/cell
<caption> : caption to a table(table name)
Example1:
Employee Details
|
||
Emp_ID
|
Emp_No
|
Emp Salary
|
11001
|
Prasad
|
30500
|
11002
|
Punit
|
25000
|
11003
|
Geeta
|
20000
|
Solution:
<!Doctype html>
<html>
<head><title>Table
Example</title>
<style>
table, td, th{
border:2px solid red;
border-collapse:collapse;
}
</style>
</head>
<body>
<table>
<caption>Employee
Details</caption>
<tr>
<th>Emp_ID</th>
<th>Emp_No</th>
<th>Emp Salary</th>
</th>
</tr>
<tr>
<td>11001</td>
<td>Prasad</td>
<td>30500</td>
</tr>
<tr>
<td>11002</td>
<td>Punit</td>
<td>25000</td>
</tr>
<tr>
<td>11003</TD>
<td>Geeta</td>
<td>20000</td>
</tr>
</body>
</head>
Border
border property is used to define a border
Example
table, th,
td {
border: 2px solid red;
}
border: 2px solid red;
}
Note:
border-width: 2pxborder –style: solidborder-color: red
Collapsed
Borders
border-collapse property is used to collapse the cell
borders
Example
table,
th, td {
border: 2px solid red;
border-collapse: collapse;
}
border: 2px solid red;
border-collapse: collapse;
}
Border
Spacing
Border
spacing defines the space between the cells.
Example
table {
border-spacing: 7px;
}
border-spacing: 7px;
}
Cell Padding
Cell
padding defines the space between the cell content and its borders.
Example
th, td {
padding: 15px;
}
padding: 15px;
}
table align
text-align property
is used to align the cell text
By
default table headings are bold and
centered.
Example
th {
text-align: left or right;
}
text-align: left or right;
}
colspan
colspan attribute
is used to divide a cell into many columns
Example 1:
<!Doctype html>
<html><head>
<title>Table exmple with
Id</title>
<style>
#to1,th,td{border:2px solid blue;
border-collapse:collapse;
background-color:pink;
text-align:center;
}
</style>
</head>
<body>
<table id="to1">
<tr
style="background-color:red;">
<th>Movie_Name</th>
<th
colspan="3">Types of tickets</th>
</tr>
<tr>
<td>DDLJ</td>
<td>Gold</td>
<td>Primium</td>
<td>Cabin</td>
</tr>
<tr>
<td>Tiger Zinda
Hai</td>
<td>Gold</td>
<td>Primium</td>
<td>Cabin</td>
</tr>
<tr>
<td>Life of Pi</td>
<td>Gold</td>
<td>Primium</td>
<td>NA</td>
</tr>
</table>
</body>
</html>
| Movie_Name | Types of tickets | ||
|---|---|---|---|
| DDLJ | Gold | Primium | Cabin |
| Tiger Zinda Hai | Gold | Primium | Cabin |
| Life of Pi | Gold | Primium | NA |
Example 2:
<html>
<head>
<style>
#tdd1,th,td{
background-color:orange;
border:2px solid gray;
border-collapse:collapse;
}
</style>
</head>
<body>
<table id="tdd1" border="1" align="center" height="350px">
<caption style="color:orange";><b>Student Table</b></caption>
<tr>
<th>Student Name</th>
<th>Student age</th>
<th colspan="3">Marks</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td>Physics</td>
<td>Chemistry</td>
<td>Biology</td>
</tr>
<tr>
<td>Maya</td>
<td>17</td>
<td>55</td>
<td>44</td>
<td>57</td>
</tr>
<tr>
<td>Ishita</td>
<td>17</td>
<td>68</td>
<td>58</td>
<td>77</td>
</tr>
<tr>
<td>Monika</td>
<td>18</td>
<td>66</td>
<td>88</td>
<td>48</td>
</tr>
</table>
</body>
</html>
rowspan
<html>
<head>
<style>
#tdd1,th,td{
background-color:orange;
border:2px solid gray;
border-collapse:collapse;
}
</style>
</head>
<body>
<table id="tdd1" border="1" align="center" height="350px">
<caption style="color:orange";><b>Student Table</b></caption>
<tr>
<th>Student Name</th>
<th>Student age</th>
<th colspan="3">Marks</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td>Physics</td>
<td>Chemistry</td>
<td>Biology</td>
</tr>
<tr>
<td>Maya</td>
<td>17</td>
<td>55</td>
<td>44</td>
<td>57</td>
</tr>
<tr>
<td>Ishita</td>
<td>17</td>
<td>68</td>
<td>58</td>
<td>77</td>
</tr>
<tr>
<td>Monika</td>
<td>18</td>
<td>66</td>
<td>88</td>
<td>48</td>
</tr>
</table>
</body>
</html>
| Student Name | Student age | Marks | ||
|---|---|---|---|---|
| Physics | Chemistry | Biology | ||
| Maya | 17 | 55 | 44 | 57 |
| Ishita | 17 | 68 | 58 | 77 |
| Monika | 18 | 66 | 88 | 48 |
rowspan
rowspan attribute is used to divide a cell into many rows
Example
<!Doctype
html>
<html><head>
<title>Rows
Span</title>
<style>
#td, th, td{
background-color:pink;
border:2px solid
gray;text-align:center;
border-collapse:collapse;
}
</style>
</head>
<body>
<table
id="td">
<tr>
<th>Movie Name</th>
<th>Types of Tickets</th>
</tr>
<tr>
<td
rowspan="2">DDLJ</td>
<td>Gold</td>
</tr>
<tr>
<td>Cablin</td>
</tr>
<tr>
<td>Tigar Zinda Hai</td>
<td>Gold</td>
</tr>
<tr>
<td rowspan="2">Life of
Pi</td>
<td>Gold</td>
</tr>
<tr>
<td>Cablin</td>
</tr>
</table>
</body>
</html>
| Movie Name | Types of Tickets |
|---|---|
| DDLJ | Gold |
| Cablin | |
| Tigar Zinda Hai | Gold |
| Life of Pi | Gold |
| Cablin |
Combine both colspan and rowspan
Example
<!Doctype html>
<html><head>
<title>Rows and cols span Example</title>
<style>
#tb, th, td {background-color:pink;
border:2px solid gray;text-align:center;
border-collapse:collapse;
}
</style>
</head>
<body>
<table id="tb">
<tr>
<th>Movie
Name</th>
<th
colspan="3">Types of Tickets</th>
</tr>
<tr>
<td
rowspan="2">DDLJ</td>
<td>Gold</td>
<td>Primium</td>
<td>Cabin</td>
</tr>
<tr>
<td>30</td>
<td>20</td>
<td>10</td>
</tr>
<tr>
<td
rowspan="2">Tiger zinda hai</td>
</tr>
<tr>
<td> </td>
<td>40</td>
<td>20</td>
</tr>
</table>
</body>
</html>| Movie Name | Types of Tickets | ||
|---|---|---|---|
| DDLJ | Gold | Primium | Cabin |
| 30 | 20 | 10 | |
| Tiger zinda hai | |||
| 40 | 20 | ||
No comments:
Post a Comment