开发者

Rounded Corner Not Showing in Table

开发者 https://www.devze.com 2023-03-28 05:04 出处:网络
I have this table and was trying to add rounded corners to it, but nothing happens. Could someone take a look and tell me where I\'m going wrong? The size of the corner images are 14px each.

I have this table and was trying to add rounded corners to it, but nothing happens. Could someone take a look and tell me where I'm going wrong? The size of the corner images are 14px each.

Any help would be appreciated greatly.

<table cellpadding="0" cellspacing="0" >
    <tr bgcolor="#e4322d" style="line-height: 0px">
        <td width="14px" height="14px"><img src="red1.png" width="14px" height="14px" alt=""></td>
        <td width="430" s开发者_运维技巧tyle="font-size: .2em">&nbsp;</td>
        <td width="14px" height="14px"><img src="red2.png" width="14px" height="14px" alt=""></td>
    </tr>

    <tr bgcolor="#e4322d">
        <td width="14px" style="font-size: 1px">&nbsp;</td>
        <td width="430" bgcolor="#e4322d" align="center" style="color: white; font-size: 16px"><span style="font-family: Verdana,Geneva,sans-serif; color:#FFFFFF;"><br>Come swim in our latest pool.<br><br></span></td>
        <td width="14px" height="14px" style="font-size: 1px;">&nbsp;</td>
    </tr>

    <tr bgcolor="#e4322d" style="line-height: 0px">
        <td width="14" height="14"><img src="red3.png" width="14" height="14" alt=""></td>
        <td width="430" style="font-size: 0px;" height="2"></td>
        <td width="14px" height="14"><img src="red4.png" width="14" height="14" alt=""></td>
    </tr>
</table>


The real problem is that you are going complete overkill on the HTML for this. You can make the whole thing simply with this HTML:

<div class="banner">Come swim in our latest pool.</div>

And add this CSS which takes care of all the styling:

.banner {
    width: 450px;
    padding: 35px 0;
    background: #E4322D;
    border-radius: 14px;
    text-align: center;
    font-size: 16px;
    color: #FFF;
}

It looks like you aren't using CSS, and are using the very old-fashioned and long outdated HTML technique of making everything with tables. There is no need. I would take the time to quickly learn CSS. It will change your life! Start here; it's easy to learn:

http://www.w3.org/wiki/CSS/Training/What_is_CSS

And by using CSS and having a global stylesheet for your site, you will be able to reuse styles without having to write new code for it every time. For example, you could have multiple banners that look the same as your "Come swim in our latest pool" one simply by giving them the same class:

<div class="banner">Come swim in our latest pool.</div>
<div class="banner">Also, check out this!</div>
<div class="banner">Hey, this box looks the same as the other two!</div>
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号