|
Complex table
This is similar to the Split text & image layout, but the banner element makes it a bit more complicated. In my example, the logo on the top left, and the banner on the top right are different images. In this case I had to split the table into fourths. The first row has the logo covering 1 column span while the banner covers 3. The second row contains the title spanning 4 columns. The third row has text covering 2 columns, and the image covering the other two. The final row has text across four columns. Make sense? Not entirely sure how I did it either, but it works. Hopefully this will be helpful to you if you need a similar arrangement. Use the navigation menu on the left to view other layouts. |
Complex table HTML
<table width="400" bgcolor="add color"> <tr><td width="100"></td><td width="100"></td><td width="100"></td><td width="100"></td></tr> <tr bgcolor="add color"> <td width="120" colspan="1" padding="0"><center><img src = "add image URL"></center></td> <td width="300" colspan="3" padding="0"> <center><img src = "add image URL" ></center> </td></tr> <tr> <td width="400" bgcolor=” add color” colspan="4"> <p><br><font size="6" color="add color" > <center>Add title text</font></center></p> </td></tr> <tr> <td width="200" bgcolor=” add color” colspan="2"> <p><font size="4" color="add color"><br>”Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco veniam, quis nostrud exercitation ullamco quis nostrud</font><br></p></td> <td width="200" colspan="2"> <center><img src="add image URL" width="180"></center> </td></tr> <tr><td colspan="4" width="400" bgcolor=”add color”> <p><font size="4" color="add color">veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." <p><a href="add hyperlink URL" > <font size="4" font color="add color"><b> >> add hyperlink text</font></a><p><br> </b></font></p> </td></tr> </table> |