mail.ru removes <caption> element

[M-J-Robbins]

When using a table with a caption such as this example from W3C

<table>
  <caption>Concerts</caption>
  <tr>
    <th>Date</th>
    <th>Event</th>
    <th>Venue</th>
  </tr>
  <tr>
    <td>12 Feb</td>
    <td>Waltz with Strauss</td>
    <td>Main Hall</td>
  </tr>
</table>

Mail.ru will remove the <caption> element and place the text before the <table>

  Concerts
 <table><tbody><tr>
    <th>Date</th>
    <th>Event</th>
    <th>Venue</th>
  </tr>
  <tr>
    <td>12 Feb</td>
    <td>Waltz with Strauss</td>
    <td>Main Hall</td>
  </tr></tbody></table>

This means you will not only loose the semantic meaning of the <caption> but also any styling on it. If you add a <div> inside the <caption> to try and maintain styles it will add a <tr> and <td> to the <table> and place the <div> there.

  <table>
  <tbody><tr><td><div>Concerts</div>
  </td></tr><tr>
    <th>Date</th>
    <th>Event</th>
    <th>Venue</th>
  </tr>
  <tr>
    <td>12 Feb</td>
    <td>Waltz with Strauss</td>
    <td>Main Hall</td>
  </tr>
</tbody></table>

So the best workaround I've found is to add a <span> inside the <caption> you can apply styles there and they will remain, however you will still loose the relationship to the table.

[M-J-Robbins]

Example of the workaround

<table>
  <caption><span style="color:red">Concerts</span></caption>
  <tr>
    <th>Date</th>
    <th>Event</th>
    <th>Venue</th>
  </tr>
  <tr>
    <td>12 Feb</td>
    <td>Waltz with Strauss</td>
    <td>Main Hall</td>
  </tr>
</table>

will become.

<span style="color:red;">Concerts</span>
<table>
  <tbody><tr>
    <th>Date</th>
    <th>Event</th>
    <th>Venue</th>
  </tr>
  <tr>
    <td>12 Feb</td>
    <td>Waltz with Strauss</td>
    <td>Main Hall</td>
  </tr>
</tbody></table>