| <!DOCTYPE html> |
| <style> |
| .float { float: left; width: 25px; height: 30px; background-color: lightgreen; } |
| </style> |
| <table border> |
| <tr> |
| <td style="vertical-align: baseline; height: 400px;"> |
| Lorem |
| </td> |
| <td style="vertical-align: baseline;"> |
| ipsum <span style="font-size: 36px;">dolor</span> |
| </td> |
| <td style="vertical-align: baseline;"> |
| <div>sit</div> |
| </td> |
| <td style="vertical-align: baseline;"> |
| <div style="background-color: lightblue; width: 50px; height: 100px;">amet</div> |
| </td> |
| <td style="vertical-align: baseline; width: 60px;"> |
| consec |
| <div style="width: 60px; height: 50px; position: absolute; top: 0; background-color: lightyellow;">P</div> |
| </td> |
| <td style="vertical-align: baseline;"> |
| <table border style="-webkit-border-vertical-spacing: 10px;"> |
| <tr> |
| <td style="padding-top: 5px; border-top: 10px solid blue; border-bottom: 5px solid blue; vertical-align: baseline;">tetuer<br>adipiscing.</td> |
| </tr> |
| </table> |
| </td> |
| <td style="vertical-align: baseline; width: 60px;"> |
| <div style="width: 60px; height: 50px; position: absolute; background-color: lightyellow;">P</div> |
| </td> |
| <td style="vertical-align: baseline;"> |
| <div style="background-color: lightpink; width: 50px; height: 100px;"></div> |
| </td> |
| <td style="vertical-align: baseline;"> |
| <table border cellpadding="5"> |
| <tr style="height: 80px;"> |
| <td style="padding-top: 15px; border-top: 10px solid blue; border-bottom: 5px solid blue; vertical-align: bottom;"><div style="background-color: lightpink;">Lorem</div></td> |
| </tr> |
| <tr> |
| <td>ipsum</td> |
| </tr> |
| </table> |
| dolor sit<br>amet. |
| </td> |
| <td style="vertical-align: baseline; width: 60px;"> |
| <div class="float">F1</div> |
| <div class="float">F2</div> |
| <div class="float">F3</div> |
| </td> |
| </tr> |
| </table> |
