It changes this original coding;
Code:
<!DOCTYPE html>
<html>
<head>
<style>
table {
height: auto;
width: 750px;
border: 3px solid grey;
border-collapse: collapse;
font-family: Droid Sans;
}
th {
height: auto;
width: 50%;
border: 3px solid grey;
border-collapse: collapse;
padding: 5px;
font-family: Droid Serif;
color: #B21A41;
}
td {
height: auto;
width: 50%;
padding: 10px;
}
td.stats {
height: auto;
width: 50%;
padding-left: 30px;
padding-right: 30px;
}
td.back {
height: auto;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 50px;
padding-right: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">TEST</th>
</tr>
<tr>
<td colspan="2" align="center">TEST</td>
</tr>
<tr>
<th>TEST</th>
<td class="stats" rowspan="2">TEST</td>
</tr>
<tr>
<td>TEST</td>
</tr>
<tr>
<th colspan="2">TEST</th>
</tr>
<tr>
<td class="back" colspan="2">TEST</td>
</tr>
</table>
</body>
</html>
Into this coding, and none of the styling is applying properly in the resulting table:
Code:
<style>
table {
height: auto;
width: 750px;
border: 3px solid grey;
border-collapse: collapse;
font-family: Droid Sans;
}
th {
height: auto;
width: 50%;
border: 3px solid grey;
border-collapse: collapse;
padding: 5px;
font-family: Droid Serif;
color: #B21A41;
}
td {
height: auto;
width: 50%;
padding: 10px;
}
td.stats {
height: auto;
width: 50%;
padding-left: 30px;
padding-right: 30px;
}
td.back {
height: auto;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 50px;
padding-right: 20px;
}
</style>
[TABLE]
<tbody>[TR]
[TH="colspan: 2"]TEST[/TH]
[/TR]
[TR]
[TD="colspan: 2, align: center"]TEST[/TD]
[/TR]
[TR]
[TH]TEST[/TH]
[TD="class: stats"]TEST[/TD]
[/TR]
[TR]
[TD]TEST[/TD]
[/TR]
[TR]
[TH="colspan: 2"]TEST[/TH]
[/TR]
[TR]
[TD="class: back, colspan: 2"]TEST[/TD]
[/TR]
</tbody>[/TABLE]
10-20-2017, 12:45 AM
Hybrid Mode
