Example 1:
table.main {
border:5px solid;
border-color: blue;
}
td.column1 {
border: 1px solid;
border-color: black;
background-color:pink;
color: #0000EE;
padding: 24px 12px 24px 4px;
}
td.default {
border: 1px solid;
border-color: #000000;
padding: 24px 12px 24px 4px;
background-color: #FFFFFF;
color: #000000;
}
td.highlight {
border: 1px solid;
border-color: red;
padding: 24px 12px 24px 4px;
background-color: #FFFF00;
color: #000000;
}
Title Row 1 | data, data, data... | data, data, data... |
Title Row 2 | data, data, data... | data, data, data... |
Title Row 3 | data, data, data... | data, data, data... |
Example:2
<table>
<head>
<style type="text/css">
</head>
<body>
table, td, th
{
border:1px solid red;
}
th
{
background-color:pink;
color:white;
}
</style>
<table><tbody>
<tr> <th>RollNo</th> <th>Name</th> <th>Result</th> </tr>
<tr> <td>A1</td> <td>Agna</td> <td>Pass</td> </tr>
<tr> <td>A2</td> <td>Amutha</td> <td>Fail</td> </tr>
<tr> <td>A3</td> <td>Bavithra</td> <td>Pass</td> </tr>
<tr> <td>A4</td> <td>Cathy</td> <td>Pass</td> </tr>
</tbody></table>
</body>
</html>
| RollNo | Name | Result |
|---|---|---|
| A1 | Agna | Pass |
| A2 | Amutha | Fail |
| A3 | Bavithra | Pass |
| A4 | Cathy | Pass |
Example:3
Creating table using CSS and Divhtml>
<head>
<title></title>
<style type="text/css">
.tablediv {
display: table;
width:600px;
background-color:lightgreen;
border:3px solid blue;
border-spacing:10px;
border-collapse:separate;
}
.celldiv {
float:left;
display: table-cell;
width:50%;
background-color:pink;
}
.rowdiv {
display: table-row;
width:auto;
background-color:yellow;
}
</style>
</head>
<body>
<div class="tablediv">
<div class="rowdiv">
<div class="celldiv">Flowers</div>
<div class="celldiv">Fruits</div>
</div>
<div class="rowdiv">
<div class="celldiv">Rose</div>
<div class="celldiv">Apple</div>
</div>
</div>
</body>
</html>
Flowers
Fruits
Rose
Apple
No comments:
Post a Comment