Answer the question
In order to leave comments, you need to log in
A
A
Andrey Zuev2017-06-26 17:35:16
Andrey Zuev, 2017-06-26 17:35:16
How to make a background in a table layout?
How the block looks in the browser on a PC: joxi.ru/RmzoyjvI6YXZ2O
It is necessary that these places joxi.ru/zAN637Qtbvl8A9 be filled with white, so that the strip between the blocks remains joxi.ru/ZrJkKxEuJwMlmj , creating an image of two separate blocks.
+ It is necessary that the blocks in the mobile version stand exactly under each other.
<!-- нов.блок -->
<tr>
<td class="three-column" bgcolor="#e4f1f9" style="padding: 0px 0px 0px 0px;">
<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td class="two-column" align="center" style="padding:0px 0px; font-size:0;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse; font-family:sans-serif;">
<tr>
<td width="50%" valign="top" align="center" style="padding:0;">
<![endif]-->
<div class="two-column" style="width:100%; max-width:296px; display:inline-block; vertical-align:top;">
<table bgcolor="#e4f1f9" width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td align="center" style="padding:0px 0px 0px 0px;">
<table align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width:100%;">
<tr>
<td align="center" style="padding:0; font-size: 0;">
<a href="ССЫЛКА" target="_blank" style="text-decoration:none;">
<img src="http://s41.radikal.ru/i094/1706/6c/a655b9ddf22b.jpg" alt="" style="border-width:0; width:100%; height:auto;">
</a>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="center" class="text" style="padding: 20px 0px 13px 0px; width: 100%; font-family: Verdana, sans-serif; color:#66ccff; font-size: 13px; line-height: 18px;">
<span style="font-family: Verdana, sans-serif; color:#66ccff; font-size: 13px; line-height: 18px;"> КАТЕГОРИЯ </span>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="center" class="text" style="padding: 0px 0px 25px 0px; width: 100%; color:#000000 !important; text-decoration:underline; ">
<a href="ССЫЛКА" target="_blank" style="color:#000000 !important; text-decoration:underline;">
<span style="font-family: Verdana, sans-serif; color:#000000; font-size: 14px; line-height: 16px;">
Ссылка на товар
</span>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="50%" valign="top" align="center" style="padding:0;">
<![endif]-->
<div class="three-column" style="width:100%; max-width:8px; display:inline-block; vertical-align:top;">
<table bgcolor="#e4f1f9" width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="50%" valign="top" align="center" style="padding:0;">
<![endif]-->
<div class="three-column" style="width:100%; max-width:296px; display:inline-block; vertical-align:top;">
<table bgcolor="#e4f1f9" width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td align="center" style="padding:0px 0px 0px 0px;">
<table align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse; font-family:sans-serif; width:100%;">
<tr>
<td align="center" style="padding:0; font-size: 0;">
<a href="ССЫЛКА" target="_blank" style="text-decoration:none;">
<img src="http://s41.radikal.ru/i094/1706/6c/a655b9ddf22b.jpg" alt="" style="border-width:0; width:100%; height:auto;">
</a>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="center" class="text" style="padding: 20px 0px 13px 0px; width: 100%; font-family: Verdana, sans-serif; color:#66ccff; font-size: 13px; line-height: 18px;">
<span style="font-family: Verdana, sans-serif; color:#66ccff; font-size: 13px; line-height: 18px;"> КАТЕГОРИЯ </span>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="center" class="text" style="padding: 0px 0px 25px 0px; width: 100%; color:#000000 !important; text-decoration:underline; ">
<a href="ССЫЛКА" target="_blank" style="color:#000000 !important; text-decoration:underline;">
<span style="font-family: Verdana, sans-serif; color:#000000; font-size: 14px; line-height: 16px;">
Ссылка на товар
</span>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<!-- // нов.блок // --> 2 answer(s)
@cozaster
for tabular layout such charms cannot be done without dancing with a tambourine? Why spreadsheet? If you need a responsive design?
well, what's the problem? do
Either a transparent border or cellspacing
cellspacing - Sets the distance between the outer borders of the cells
To be honest, I haven't seen sites made up with tables for 10 years. In letters sometimes found, but on the site? Why is this so?
@devstudent
M
Maxim Timofeev, 2017-06-26 @cozaster
It is necessary that the blocks in the mobile version stand exactly under each other
for tabular layout such charms cannot be done without dancing with a tambourine? Why spreadsheet? If you need a responsive design?
well, what's the problem? do
background-color: #fff;Either a transparent border or cellspacing
cellspacing - Sets the distance between the outer borders of the cells
To be honest, I haven't seen sites made up with tables for 10 years. In letters sometimes found, but on the site? Why is this so?
D
devstudent, 2017-06-27 @devstudent
put a background on cells, rows or the entire table. media queries and css styles make anything out of the table, even flexbox
Similar questions
M
G
A
C
M
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question