LaVOZs

The World’s Largest Online Community for Developers

'; formatting - Forcing linebreak and round corners in html - LavOzs.Com

I have a table that looks like this:

table

The code for this is:

<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>

I want to achieve something like this:

goal

How can I force a linebreak after Köln? I tried <br>, but it didn't work. How can one get these round corners (like in the image)?

you can just put those elements to next line:

<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>