时事通讯的html表

Question

我正在尝试将其复制为时事通讯，并以文本和图像为中心。

这是我到目前为止所拥有的

我试图添加边框折叠：折叠；属性，并向左和向右添加边框，但我被堆叠了。如果您对如何创建竖线以及倾斜文本和图像有任何建议，我将不胜感激。

            <table class="outer-table-2">
                <tr>
                    <td class="three-column">
                        <div class="section">
                            <table width="100%">
                                <tr>
                                    <td class="inner-td">
                                        <table class="content">
                                            <tr>
                                                <td class="text">
                                                    <p>01628531300</p>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </div> 
                        <div class="section">
                            <table width="100%">
                                <tr>
                                    <td class="inner-td">
                                        <table class="content">
                                            <tr>
                                                <td>
                                                    <div id="callout">
                                                        <ul class="social">
                                                            <li><a href="index.html#" target="_blank"><img src="facebook.png"></a></li>
                                                            <li><a href="index.html#" target="_blank"><img src="twitter.png"></a></li>
                                                            <li><a href="index.html#" target="_blank"><img src="linkedin.png"></a></li>
                                                        </ul>
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </div> 
                        <div class="section">
                            <table width="100%">
                                <tr>
                                    <td class="inner-td">
                                        <table class="content">
                                            <tr>
                                                <td class="text">
                                                    <p><a href="wwww.cdvi.co.uk">www.cdvi.co.uk</a><p>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </div> 
                    </td>
                </tr> 
            </table> 

<style>
.outer-table-2 {
    width: 100%;
    max-width: 670px;
    margin: 12px auto;
    border: 3px solid #00467f;


}
.three-column {

}
.three-column .section {
    width: 100%;
    max-width: 200px;
    display: inline-block;
    vertical-align: top;
    background-color: #FFFFf;
}

.three-column .social {
    width: 100%;
    height: 10px;
    margin: 0 0 5px 0;

}
.outer-table-2 p {
    margin:10px 10px 10px 40px;
    color: #00467f;
    font-size: 12px;
    font-weight: 1000 !important;
    line-height: 10px;


}


.middle-table {
   margin: auto;
   padding-top: 10px;


}

.middle-table img{
    width: 120px;
    height: 80px;

}
</style>

Answer 1

我认为您对此过于复杂。您只需要一张桌子即可重新创建与图片相似的布局。

table {
  width: 100%;
  border-collapse: collapse;
}

tr {
  height: 60px;
}

td {
  text-align: center;
}

.b-t {
  border-top: 5px solid darkblue;
}

.b-l {
  border-left: 5px solid darkblue;
}

.b-r {
  border-right: 5px solid darkblue;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
}

<table>
  <tr>
    <td class="b-t b-r">01628531300</td>
    <td class="b-t">
      <ul class="social">
        <li><a href="index.html#" target="_blank"><img src="facebook.png"></a></li>
        <li><a href="index.html#" target="_blank"><img src="twitter.png"></a></li>
        <li><a href="index.html#" target="_blank"><img src="linkedin.png"></a></li>
      </ul>
    </td>
    <td class="b-t b-l">
      <a href="wwww.cdvi.co.uk">www.cdvi.co.uk</a>
    </td>
  </tr>
</table>