普通の枠線ボックス内のテーブルです

タイトル

主文

本文


リンク→時事逓信屋


🐶test1🐶
test2 test3
　 　　　　 　 　　　　 　 　　　　 　 　　　　 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>枠線ボックスのサンプル</title>
<style>
    .box {　/* ボックス */
      position: relative;        /* タイトルを絶対配置するための基準 */
      border: 2px solid #6666ff;　/* 枠のサイズ/色 */　/* グラデーション　↓ */
      background: radial-gradient(circle at 30% 30%, #e0f7fa, #b2ebf2, #80deea);
      border-radius: 6px;　/* 角丸サイズ */
      padding: 20px;　 /* 内側の余白 */
      margin-top: 40px;          /* タイトル分の余白 */
      width: auto;              /* サンプル用に自動幅 */
    }

    .box-title {　/* タイトルボックス */
      position: absolute;
      top: -26px;                /* 枠線の上に重ねる フォントサイズで調整*/
      left: 50%;                 /* 横方向の中央 */
      transform: translateX(-50%);　/*幅の50%分だけ左に移動*/
      color: rgb(255, 255, 255); 
      background: rgb(72, 44, 228);
      border-radius: 12px;
      padding: 0 10px;
      border: 2px solid #6666ff;    /* タイトル用の小枠 */
      font-size: 32px;　/* フォントサイズ */
      font-weight: bold;　/* 太文字 */
    }
  </style>
</head>
<body>
<div class="box">
    <span class="box-title">タイトル</span>
    <p><b><font size= "5">主文</font></b><br>
<br>
本文<br>
<br>
<br>
リンク→<a href="https://flower-processing.net/wp/"><font color="#800080">時事逓信屋</font></a></p>
<table width="100%">
  <TBODY>
    <TR>  <!--中央/横１列連結/文字サイズ/色/太文字-->
      <TD align="center" colspan="4"><B><FONT size="+3" color="#0000ff">test1</FONT></B></TD>
    </TR>
    <TR>
      <TD colspan="2" align="center" style="background-color : yellow;"><B>test2</B></TD>
      <TD colspan="2" align="center" style="background-color : yellow;"><B>test3</B></TD>
    </TR>
      <TR>　<!--背景色/画像アドレス-->
       <TD style="background-color : lime;">　
       <img src="./imgs/test1.png"></TD>
       <TD style="background-color : fuchsia;">
       <img src="./imgs/test2.png"></TD>
       <TD style="background-color : blue;">
       <img src="./imgs/test3.png"></TD>
       <TD style="background-color : red;">
       <img src="./imgs/test4.png"></TD>
     </TR>
   </TBODY>
 </TABLE>
</div>
</body>
</html>