# Table testing

<style>
  /* shared settings for all type badges */
  .type {
    width: 125px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    border-radius: 16px;
    padding: 6px 8px;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
        box-sizing: border-box;
        line-height: 1;
  }

  /* individual type colors */
  .type.normal   { background: #A8A77A; }
  .type.fire     { background: #EE8130; }
  .type.water    { background: #6390F0; }
  .type.electric { background: #F7D02C; color: #111; }
  .type.grass    { background: #7AC74C; }
  .type.ice      { background: #96D9D6; color: #111; }
  .type.fighting { background: #C22E28; }
  .type.poison   { background: #A33EA1; }
  .type.ground   { background: #E2BF65;}
  .type.flying   { background: #A98FF3;}
  .type.psychic  { background: #F95587; }
  .type.bug      { background: #A6B91A; }
  .type.rock     { background: #B6A136; }
  .type.ghost    { background: #735797; }
  .type.dragon   { background: #6F35FC; }
  .type.dark     { background: #705746; }
  .type.steel    { background: #B7B7CE; }
  .type.fairy    { background: #D685AD; }
</style>


<div class="type.steel">Water</div>

<table>
  <tr>
    <td style="border:1px solid gray;height:50px;vertical-align:super;padding:10px">
      <a href="#water" style="text-decoration:none;">
      <div style="width:125px;background:#6390F0;color:white;border-radius:10px;padding:2px;text-align:center;">Water</div>
      </a>
      <!----ui3 chia si7 te7 2 keh------>
      </td>
          <td style="border:1px solid gray;height:50px;vertical-align:super;padding:10px">
      <a href="#water" style="text-decoration:none;">
      <div style="width:125px;background:#7AC74C;color:white;border-radius:10px;padding:2px;text-align:center;">Chháu-á 草仔</div>
      </a>
      <tr>
        <td></td>
        <td></td>
      </tr>
      </td>
</tr></table>


<a href="#combat" style="text-decoration:none;">
  <div style="
    width:240px;
    padding:12px;
    border:2px solid #ccc;
    border-radius:8px;
    background:#e0f7fa;
    font-weight:bold;
    text-align:center;
    cursor:pointer;
  ">
    Jump to Combat Section
  </div>
</a>


<a id="tag-search" href="#" onclick="(function(){
  var tag = 'Chháu-á 草仔';
  var encoded = encodeURIComponent(tag);
  // change the path below if your BookStack search URL differs
  var url = '/search?term=' + encoded;
  window.open(url, '_blank', 'noopener');
  return false;
})();" aria-label="Search Chháu-á 草仔">
  <div style="width:125px;background:#7AC74C;color:white;border-radius:10px;padding:2px;text-align:center;">
    Chháu-á 草仔
  </div>
</a>