Принудительный разрыв строки и закругление углов в html

Question

У меня есть таблица, которая выглядит следующим образом:

Код для этого:

<div>
   <font size="3"><b><br/></b></font>
   <div>
      <table class="dd13"> 
         <tbody>
            <tr> 
               <td onclick="openLink(&#39;site.aspx?locations=Ulm&#39;);" class="dd13" style="background-color: #48a040;">Ulm</td>
               <td style="background-color: #ffffff;">&#160;</td> 
               <td onclick="openLink(&#39;site.aspx?locations=Taufkirchen&#39;);" class="dd13" style="background-color: #48a040;">Taufkirchen</td>
               <td style="background-color: #ffffff;">&#160;</td> 
               <td onclick="openLink(&#39;site.aspx?locations=Oberkochen&#39;);" class="dd13" style="background-color: #48a040;">Oberkochen</td>
               <td style="background-color: #ffffff;">&#160;</td>
               <td onclick="openLink(&#39;site.aspx?locations=%25C3%25B6&#39;);" class="dd13" style="background-color: #48a040;">Köln</td>
               <td style="background-color: #ffffff;">&#160;</td> 
               <td onclick="openLink(&#39;site.aspx?locations=Friedrichshafen&#39;);" class="dd13" style="background-color: #48a040;">Friedrichshafen</td>
               <td style="background-color: #ffffff;">&#160;</td> 
               <td onclick="openLink(&#39;site.aspx?locations=Wetzlar&#39;);" class="dd13" style="background-color: #48a040;">Wetzlar</td>
               <td style="background-color: #ffffff;">&#160;</td> 
               <td onclick="openLink(&#39;site.aspx?locations=Kiel&#39;);" class="dd13" style="background-color: #48a040;">Kiel</td>
            </tr> 
         </tbody>
      </table> 
      <p>
         <br/>
      </p>
      <p>To register yourself to a seminar please click on this icon 
         <a title="Book for me" class="book-for-me-button"></a>. To register someone else to a seminar, please click on this icon 
         <a title="Book for me" class="book-for-user-button"></a>.<br/></p> 
   </div>
</div>

Я хочу чтобы достичь чего-то вроде этого:

Как я могу вызвать разрыв строки после Кельна? Я пытался <br>, но это не сработало. Как можно получить эти круглые углы (как на картинке)?

Answer 1

вы можете просто поместить эти элементы в следующую строку:

<div>
   <font size="3"><b><br/></b></font>
   <div>
      <table class="dd13"> 
            <tr> 
               <td onclick="openLink(&#39;site.aspx?locations=Ulm&#39;);" class="dd13" style="background-color: #48a040;">Ulm</td>
               <td onclick="openLink(&#39;site.aspx?locations=Taufkirchen&#39;);" class="dd13" style="background-color: #48a040;">Taufkirchen</td>
               <td onclick="openLink(&#39;site.aspx?locations=Oberkochen&#39;);" class="dd13" style="background-color: #48a040;">Oberkochen</td>
               <td onclick="openLink(&#39;site.aspx?locations=%25C3%25B6&#39;);" class="dd13" style="background-color: #48a040;">Köln</td>
            </tr> 
            <tr> 
               <td onclick="openLink(&#39;site.aspx?locations=Friedrichshafen&#39;);" class="dd13" style="background-color: #48a040;">Friedrichshafen</td>
               <td onclick="openLink(&#39;site.aspx?locations=Wetzlar&#39;);" class="dd13" style="background-color: #48a040;">Wetzlar</td>
               <td onclick="openLink(&#39;site.aspx?locations=Kiel&#39;);" class="dd13" style="background-color: #48a040;">Kiel</td>
            </tr> 
      </table> 
      <p>
         <br/>
      </p>
      <p>To register yourself to a seminar please click on this icon 
         <a title="Book for me" class="book-for-me-button"></a>. To register someone else to a seminar, please click on this icon 
         <a title="Book for me" class="book-for-user-button"></a>.<br/></p> 
   </div>
</div>