Irregular table
<head>
<title>Irregular table 1</title>
<style>
table,td{
border:1px solid black;
border-collapse:collapse;
text-align:right;
}
th{
background-color:gray;
text-align:left;
}
</style>
</head>
<body>
<table border="1" cellpadding="10">
<tr>
<td rowspan="2" > </td>
<th colspan="2">Mars</th>
<th colspan="2">Venus</th>
</tr>
<tr>
<th>Produced</th>
<th>Sold</th>
<th>Produced</th>
<th>Sold</th>
</tr>
<tr>
<th>Teddy Bears</th>
<td>50,000</td>
<td>30,000</td>
<td>100,000</td>
<td>80,000</td>
</tr>
<tr>
<th>Board Games</th>
<td>10,000</td>
<td>5,000</td>
<td>12,000</td>
<td>9,000</td>
</tr>
</table>
</body>
</html>
Irregular table 2
<html>
<head> <title>Irregular_table 2</title>
<style>
table,th,td{
border:1px solid black;
border-collapse:collapse
}
th{
background-color:grey;
}
th{
text-align:left;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Poster name</th>
<th>color</th>
<th colspan="3">size available</th>
</tr>
<tr>
<th rowspan="3">Zodiac</th>
<th>Full color</th>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<th>Black and white</th>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<th>Sepia</th>
<td>A3</td>
<td>A4</td>
<td>A5</td>
</tr>
<tr>
<th rowspan="2">Angles</th>
<th>Black and white</th>
<td>A1</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<th>Sepia</th>
<td>A2</td>
<td>A3</td>
<td>A5</td>
</tr>
</table>
<body>
</html>
Irregular Table 3
<html>
<head>
<title>Irregular table 3</title>
<style>
table{
border:3px solid grey;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Heading1</th>
<th>Heading2</th>
<th>Heading3</th>
</tr>
<tr>
<td align="center">cell1 text</td>
<td>cell2 text A<br>cell2textB</td>
<td align="center">cell3 text</td>
</tr>
<tr>
<td>a long piece of cell textall on one line without a break</td>
<td><i>cell text</i></td>
<td align="right">cell text aligned right</td>
</tr>
<tr>
<th>cell text</th>
<td> </td>
<td bgcolor="yellow">graphic background</td>
</tr>
<tr>
<td colspan="3" align="center">Mid table Heading</td>
</tr>
<tr>
<td>Things to do today</td>
<th rowspan ="5">W<br>E<br>E<br>K<br> <br>26</th>
<td>Monday</td>
</tr>
<tr>
<td bgcolor="red">Things to do on tuesday</td>
<td bgcolor="red">Tuesday</td>
</tr>
<tr>
<td>Things to do today</td>
<td>Wednesday</td>
</tr>
<tr>
<td bgcolor="green" align="center">Things to do today</td>
<td bgcolor="green">Thursday</td>
</tr>
<tr>
<td>stuff to tidy up <b>before the weekend</b></td>
<td>friday</td>
</tr>
</table>
</body>
</html>
Irregular Table 4
<html>
<head>
<title>Irregular table 4</title>
<style>
table{
border:6px solid red;
border-collapse:collapse;
}
th{
border:6px solid blue;
}
tr{
border:5px solid black;
}
td{
border:4px solid red;
}
</style>
</head>
<body>
<table border="1" cellpadding="20">
<tr>
<th style="color:blue;">header1</th>
<th style="color:blue;">header2</th>
<th style="color:blue;">header3</th>
<th style="color:blue;">header4</th>
</tr>
<tr>
<td> </td>
<td rowspan="4"> </td>
<td rowspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td rowspan="3"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
<td rowspan="2"> </td>
<td rowspan="4"> </td>
</tr>
<tr>
<td> </td>
<td rowspan="3"> </td>
</tr>
<tr>
<td> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
Irregular Table 5
<html>
<head>
<title>Irregular table 5</title>
</head>
<body>
<table border="2" cellpadding="15" cellspacing="1" width="50%">
<tr style="background-color:#286695">
<td rowspan="2" colspan="2" align="center">{indexpage.thumbnail}</td>
<td>{indexpage.thumbnail}</td>
<td>{indexpage.thumbnail}</td>
</tr>
<tr style="background-color:#286695">
<td>{indexpage.thumbnail}</td>
<td>{indexpage.thumbnail}</td>
</tr>
<tr style="background-color:#C49b99">
<td>{indexpage.thumbnail}</td>
<td>{indexpage.thumbnail}</td>
<td>{indexpage.thumbnail}</td>
<td>{indexpage.thumbnail}</td>
</tr>
<tr style="background-color:#286695">
<td>{indexpage.thumbnail}</td>
<th colspan="2"><h1>Your text here</h1></th>
<td>{indexpage.thumbnail}</td>
</tr>
</table>
</body>
</html>
No comments:
Post a Comment