path: root/files/pt-pt/learn/html/tables/advanced/index.html

---
title: HTML - funcionalidades avançadas de tabela e acessibilidade
slug: Learn/HTML/Tables/Advanced
tags:
  - Acessibilidade
  - Aprender
  - Artigo
  - Avançado
  - Cabeçalhos
  - HTML
  - Headers
  - Principiante
  - Resumo
  - caption
  - incorporar
  - legenda
  - tabela
translation_of: Learn/HTML/Tables/Advanced
original_slug: Learn/HTML/Tables/Avancada
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div>

<p class="summary">No segundo artigo neste módulo, nós vamos ver algumas funcionalidades mais avançadas das tabelas HTML tables — tais como legendas/resumos e agrupar as suas filas no cabçalho da taela, secções de corpo e rodapé — bem como, ver a acessibilidade das tabelas para os utilizadores deficientes visuais.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Pré-requisitos:</th>
   <td>The basics of HTML (see <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>).</td>
  </tr>
  <tr>
   <th scope="row">Objetivo:</th>
   <td>To learn about more advanced HTML table features, and the accessibility of tables.</td>
  </tr>
 </tbody>
</table>

<h2 id="Adicionar_uma_legenda_à_sua_tabela_com_&lt;caption>">Adicionar uma legenda à sua tabela com &lt;caption&gt;</h2>

<p>You can give your table a caption by putting it inside a {{htmlelement("caption")}} element and nesting that inside the {{htmlelement("table")}} element. You should put it just below the opening <code>&lt;table&gt;</code> tag.</p>

<pre class="brush: html">&lt;table&gt;
  &lt;caption&gt;Dinosaurs in the Jurassic period&lt;/caption&gt;

  ...
&lt;/table&gt;</pre>

<p>As you can infer from the brief example above, the caption is meant to contain a description of the table contents. This is useful for all readers wishing to get a quick idea of whether the table is useful to them as they scan the page, but particularly for blind users. Rather than have a screenreader read out the contents of many cells just to find out what the table is about, he or she can rely on a caption and then decide whether or not to read the table in greater detail.</p>

<p>A caption is placed directly beneath the <code>&lt;table&gt;</code> tag.</p>

<div class="note">
<p><strong>Nota</strong>: The {{htmlattrxref("summary","table")}} attribute can also be used on the <code>&lt;table&gt;</code> element to provide a description — this is also read out by screenreaders. We'd recommend using the <code>&lt;caption&gt;</code> element instead, however, as <code>summary</code> is {{glossary("deprecated")}} by the HTML5 spec, and can't be read by sighted users (it doesn't appear on the page.)</p>
</div>

<h3 id="Aprendizagem_ativa_Adicionar_uma_caption">Aprendizagem ativa: Adicionar uma <em>caption</em></h3>

<p>Let's try this out, revisiting an example we first met in the previous article.</p>

<ol>
 <li>Open up your language teacher's school timetable from the end of <a href="/en-US/docs/Learn/HTML/Tables/Basics#Active_learning_colgroup_and_col">HTML Table Basics</a>, or make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> file.</li>
 <li>Add a suitable caption for the table.</li>
 <li>Save your code and open it in a browser to see what it looks like.</li>
</ol>

<div class="note">
<p><strong>Nota</strong>: You can find our version on GitHub — see <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html">timetable-caption.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html">see it live also</a>).</p>
</div>

<h2 id="Adding_structure_with_&lt;thead>_&lt;tfoot>_and_&lt;tbody>">Adding structure with &lt;thead&gt;, &lt;tfoot&gt;, and &lt;tbody&gt;</h2>

<p>As your tables get a bit more complex in structure, it is useful to give them more structural definition. One clear way to do this is by using {{htmlelement("thead")}}, {{htmlelement("tfoot")}}, and {{htmlelement("tbody")}}, which allow you to mark up a header, footer, and body section for the table.</p>

<p>These elements don't make the table any more accessible to screenreader users, and don't result in any visual enhancement on their own. They are however very useful for styling and layout — acting as useful hooks for adding CSS to your table. To give you some interesting examples, in the case of a long table you could make the table header and footer repeat on every printed page, and you could make the table body display on a single page and have the contents available by scrolling up and down.</p>

<p>To use them:</p>

<ul>
 <li>The <code>&lt;thead&gt;</code> element needs to wrap the part of the table that is the header — this will commonly be the first row containing the column headings, but this is not necessarily always the case. if you are using {{htmlelement("col")}}/{{htmlelement("colgroup")}} element, the table header should come just below those.</li>
 <li>The <code>&lt;tfoot&gt;</code> element needs to wrap the part of the table that is the footer — this might be a final row with items in the previous rows summed, for example. You can include the table footer right at the bottom of the table as you'd expect, or just below the table header (the browser will still render it at the bottom of the table).</li>
 <li>The <code>&lt;tbody&gt;</code> element needs to wrap the other parts of the table content that aren't in the table header or footer. It will appear below the table header or sometimes footer, depending on how you decided to structure it (see the notes above).</li>
</ul>

<div class="note">
<p><strong>Note</strong>: <code>&lt;tbody&gt;</code> is always included in every table, implicitly if you don't specify it in your code. To check this, open up one of your previous examples that doesn't include <code>&lt;tbody&gt;</code> and look at the HTML code in your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a> — you will see that the browser has added this tag for you. You might wonder why you ought to bother including it at all — you should, because it gives you more control over your table structure and styling.</p>
</div>

<h3 id="Aprendizagem_ativa_Adicionar_uma_estrutura_de_tabela">Aprendizagem ativa: Adicionar uma estrutura de tabela</h3>

<p>Let's put these new elements into action.</p>

<ol>
 <li>First of all, make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record.html">spending-record.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a> in a new folder.</li>
 <li>Try opening it in a browser — You'll see that it looks OK, but it could stand to be improved. The "SUM" row that contains a summation of the spent amounts seems to be in the wrong place, and there are some details missing from the code.</li>
 <li>Put the obvious headers row inside a <code>&lt;thead&gt;</code> element, the "SUM" row inside a <code>&lt;tfoot&gt;</code> element, and the rest of the content inside a <code>&lt;tbody&gt;</code> element.</li>
 <li>Save and refresh, and you'll see that adding the <code>&lt;tfoot&gt;</code> element has caused the "SUM" row to go down to the bottom of the table.</li>
 <li>Next, add a {{htmlattrxref("colspan","td")}} attribute to make the "SUM" cell span across the first four columns, so the actual number appears at the bottom of the "Cost" column.</li>
 <li>Let's add some simple extra styling to the table, to give you an idea of how useful these elements are for applying CSS. Inside the head of your HTML document, you'll see an empty {{htmlelement("style")}} element. Inside this element, add the following lines of CSS code:
  <pre class="brush: css">tbody {
  font-size: 90%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}
</pre>
 </li>
 <li>Save and refresh, and have a look at the result. If the <code>&lt;tbody&gt;</code> and <code>&lt;tfoot&gt;</code> elements weren't in place, you'd have to write much more complicated selectors/rules to apply the same styling.</li>
</ol>

<div class="note">
<p><strong>Nota</strong>: We don't expect you to fully understand the CSS right now. You'll learn more about this when you go through our CSS modules (<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> is a good place to start; we also have an article specifically on <a href="/en-US/docs/Learn/CSS/Styling_boxes/Styling_tables">styling tables</a>).</p>
</div>

<p>Your finished table should look something like the following:</p>

<div class="hidden">
<h6 id="Hidden_example">Hidden example</h6>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;My spending record&lt;/title&gt;
    &lt;style&gt;

        html {
          font-family: sans-serif;
        }

          table {
          border-collapse: collapse;
          border: 2px solid rgb(200,200,200);
          letter-spacing: 1px;
          font-size: 0.8rem;
        }

        td, th {
          border: 1px solid rgb(190,190,190);
          padding: 10px 20px;
        }

        th {
          background-color: rgb(235,235,235);
        }

        td {
          text-align: center;
        }

        tr:nth-child(even) td {
          background-color: rgb(250,250,250);
        }

        tr:nth-child(odd) td {
          background-color: rgb(245,245,245);
        }

        caption {
          padding: 10px;
        }

        tbody {
          font-size: 90%;
          font-style: italic;
        }

        tfoot {
          font-weight: bold;
        }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;table&gt;
        &lt;caption&gt;How I chose to spend my money&lt;/caption&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;Purchase&lt;/th&gt;
            &lt;th&gt;Location&lt;/th&gt;
            &lt;th&gt;Date&lt;/th&gt;
            &lt;th&gt;Evaluation&lt;/th&gt;
            &lt;th&gt;Cost (€)&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tfoot&gt;
          &lt;tr&gt;
            &lt;td colspan="4"&gt;SUM&lt;/td&gt;
            &lt;td&gt;118&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tfoot&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td&gt;Haircut&lt;/td&gt;
            &lt;td&gt;Hairdresser&lt;/td&gt;
            &lt;td&gt;12/09&lt;/td&gt;
            &lt;td&gt;Great idea&lt;/td&gt;
            &lt;td&gt;30&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Lasagna&lt;/td&gt;
            &lt;td&gt;Restaurant&lt;/td&gt;
            &lt;td&gt;12/09&lt;/td&gt;
            &lt;td&gt;Regrets&lt;/td&gt;
            &lt;td&gt;18&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Shoes&lt;/td&gt;
            &lt;td&gt;Shoeshop&lt;/td&gt;
            &lt;td&gt;13/09&lt;/td&gt;
            &lt;td&gt;Big regrets&lt;/td&gt;
            &lt;td&gt;65&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Toothpaste&lt;/td&gt;
            &lt;td&gt;Supermarket&lt;/td&gt;
            &lt;td&gt;13/09&lt;/td&gt;
            &lt;td&gt;Good&lt;/td&gt;
            &lt;td&gt;5&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;

  &lt;/body&gt;
&lt;/html&gt;</pre>
</div>

<p>{{ EmbedLiveSample('Hidden_example', '100%', 300) }}</p>

<div class="note">
<p><strong>Nota</strong>: You can also find it on Github as <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html">spending-record-finished.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html">see it live also</a>).</p>
</div>

<h2 id="Incorporar_Tabelas">Incorporar Tabelas</h2>

<p>It is possible to nest a table inside another one, as long as you include the complete structure, including the <code>&lt;table&gt;</code> element. This is generally not really advised, as it makes the markup more confusing and less accessible to screenreader users, and in many cases you might as well just insert extra cells/rows/columns into the existing table. It is however sometimes necessary, for example if you want to import content easily from other sources.</p>

<p>The following markup shows a simple nested table:</p>

<pre class="brush: html">&lt;table id="table1"&gt;
  &lt;tr&gt;
    &lt;th&gt;title1&lt;/th&gt;
    &lt;th&gt;title2&lt;/th&gt;
    &lt;th&gt;title3&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td id="nested"&gt;
      &lt;table id="table2"&gt;
        &lt;tr&gt;
          &lt;td&gt;cell1&lt;/td&gt;
          &lt;td&gt;cell2&lt;/td&gt;
          &lt;td&gt;cell3&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/td&gt;
    &lt;td&gt;cell2&lt;/td&gt;
    &lt;td&gt;cell3&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;cell4&lt;/td&gt;
    &lt;td&gt;cell5&lt;/td&gt;
    &lt;td&gt;cell6&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</pre>

<p>The output of which looks something like this:</p>

<table id="table1">
 <tbody>
  <tr>
   <th>title1</th>
   <th>title2</th>
   <th>title3</th>
  </tr>
  <tr>
   <td id="nested">
    <table id="table2">
     <tbody>
      <tr>
       <td>cell1</td>
       <td>cell2</td>
       <td>cell3</td>
      </tr>
     </tbody>
    </table>
   </td>
   <td>cell2</td>
   <td>cell3</td>
  </tr>
  <tr>
   <td>cell4</td>
   <td>cell5</td>
   <td>cell6</td>
  </tr>
 </tbody>
</table>

<h2 id="Tabelas_para_utilizadores_deficientes_visuais">Tabelas para utilizadores deficientes visuais</h2>

<p>Let's recap briefly on how we use data tables. A table can be a handy tool, for giving us quick access to data and allowing us to look up different values. For example, It takes only a short glance at the table below to find out how many rings were sold in Gent last August. To understand its information we make visual associations between the data in this table and its column and/or row headers.</p>

<table>
 <caption>Items Sold August 2016</caption>
 <tbody>
  <tr>
   <td> </td>
   <td> </td>
   <th colspan="3" scope="colgroup">Clothes</th>
   <th colspan="2" scope="colgroup">Accessories</th>
  </tr>
  <tr>
   <td> </td>
   <td> </td>
   <th scope="col">Trousers</th>
   <th scope="col">Skirts</th>
   <th scope="col">Dresses</th>
   <th scope="col">Bracelets</th>
   <th scope="col">Rings</th>
  </tr>
  <tr>
   <th rowspan="3" scope="rowgroup">Belgium</th>
   <th scope="row">Antwerp</th>
   <td>56</td>
   <td>22</td>
   <td>43</td>
   <td>72</td>
   <td>23</td>
  </tr>
  <tr>
   <th scope="row">Gent</th>
   <td>46</td>
   <td>18</td>
   <td>50</td>
   <td>61</td>
   <td>15</td>
  </tr>
  <tr>
   <th scope="row">Brussels</th>
   <td>51</td>
   <td>27</td>
   <td>38</td>
   <td>69</td>
   <td>28</td>
  </tr>
  <tr>
   <th rowspan="2" scope="rowgroup">The Netherlands</th>
   <th scope="row">Amsterdam</th>
   <td>89</td>
   <td>34</td>
   <td>69</td>
   <td>85</td>
   <td>38</td>
  </tr>
  <tr>
   <th scope="row">Utrecht</th>
   <td>80</td>
   <td>12</td>
   <td>43</td>
   <td>36</td>
   <td>19</td>
  </tr>
 </tbody>
</table>

<p>But what if you cannot make those visual associations? How then can you read a table like the above? Visually impaired people often use a screenreader that reads out information on web pages to them. This is no problem when you're reading plain text but interpreting a table can be quite a challenge for a blind person. Nevertheless, with the proper markup we can replace visual associations by programmatic ones.</p>

<p>This section of the article provides further techniques for making tables as accessible as possible.</p>

<h3 class="attTitle" id="Utilizar_os_cabeçalhos_de_coluna_e_linha">Utilizar os cabeçalhos de coluna e linha</h3>

<p>Screenreaders will identify all headers and use them to make programmatic associations between those headers and the cells they relate to. The combination of column and row headers will identify and interpret the data in each cell so that screenreader user can interpret the table similarly to how a sighted user does.</p>

<p>We already covered headers in our previous article — see <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics#Adding_headers_with_%3Cth%3E_elements">Adding headers with &lt;th&gt; elements</a>.</p>

<h3 class="attTitle" id="O_atributo_de_scope">O atributo de <em>scope</em></h3>

<p>A new topic for this article is the {{htmlattrxref("scope","th")}} attribute, which can be added to the <code>&lt;th&gt;</code> element to tell screenreaders exactly what cells the header is a header for — is it a header for the row it is in, or the column, for example? Looking back to our spending record example from earlier on, you could unambiguously define the column headers as column headers like this:</p>

<pre class="brush: html">&lt;thead&gt;
  &lt;tr&gt;
    &lt;th scope="col"&gt;Purchase&lt;/th&gt;
    &lt;th scope="col"&gt;Location&lt;/th&gt;
    &lt;th scope="col"&gt;Date&lt;/th&gt;
    &lt;th scope="col"&gt;Evaluation&lt;/th&gt;
    &lt;th scope="col"&gt;Cost (€)&lt;/th&gt;
  &lt;/tr&gt;
&lt;/thead&gt;</pre>

<p>And each row could have a header defined like this (if we added row headers as well as column headers):</p>

<pre class="brush: html">&lt;tr&gt;
  &lt;th scope="row"&gt;Haircut&lt;/th&gt;
  &lt;td&gt;Hairdresser&lt;/td&gt;
  &lt;td&gt;12/09&lt;/td&gt;
  &lt;td&gt;Great idea&lt;/td&gt;
  &lt;td&gt;30&lt;/td&gt;
&lt;/tr&gt;</pre>

<p>Screenreaders will recognize markup structured like this, and allow their users to read out the entire column or row at once, for example.</p>

<p><code>scope</code> has two more possible values — <code>colgroup</code> and <code>rowgroup</code>. these are used for headings that sit over the top of multiple columns or rows. If you look back at the "Items sold..." table at the start of this section of the article, you'll see that the "Clothes" cell sits above the "Trousers", "Skirts", and "Dresses" cells. All of these cells should be marked up as headers (<code>&lt;th&gt;</code>), but "Clothes" is a heading that sits over the top and defines the other three subheadings. "Clothes" therefore should get an attribute of <code>scope="colgroup"</code>, whereas the others would get an attribute of <code>scope="col"</code>.</p>

<h3 class="attTitle" id="A_identificação_e_atributos_de_cabeçalhos">A identificação e atributos de cabeçalhos</h3>

<p>An alternative to using the <code>scope</code> attribute is to use {{htmlattrxref("id")}} and {{htmlattrxref("headers", "td")}} attributes to create associations between headers and cells. The way they are used is as follows:</p>

<ol>
 <li>You add a unique <code>id</code> to each <code>&lt;th&gt;</code> element.</li>
 <li>You add a <code>headers</code> attribute to each <code>&lt;td&gt;</code> element. Each <code>headers</code> attribute has to contain a list of the <code>id</code>s of all the &lt;th&gt; elements that act as a header for that cell, separated by spaces.</li>
</ol>

<p>This gives your HTML table an explicit definition of the position of each cell in the table, defined by the header(s) for each column and row it is part of, kind of like a spreadsheet. For it to work well, the table really needs both column and row headers.</p>

<p>Returning to our spending costs example, the previous two snippets could be rewritten like this:</p>

<pre class="brush: html">&lt;thead&gt;
  &lt;tr&gt;
    &lt;th id="purchase"&gt;Purchase&lt;/th&gt;
    &lt;th id="location"&gt;Location&lt;/th&gt;
    &lt;th id="date"&gt;Date&lt;/th&gt;
    &lt;th id="evaluation"&gt;Evaluation&lt;/th&gt;
    &lt;th id="cost"&gt;Cost (€)&lt;/th&gt;
  &lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
  &lt;th id="haircut"&gt;Haircut&lt;/th&gt;
  &lt;td headers="location haircut"&gt;Hairdresser&lt;/td&gt;
  &lt;td headers="date haircut"&gt;12/09&lt;/td&gt;
  &lt;td headers="evaluation haircut"&gt;Great idea&lt;/td&gt;
  &lt;td headers="cost haircut"&gt;30&lt;/td&gt;
&lt;/tr&gt;

  ...

&lt;/tbody&gt;</pre>

<div class="note">
<p><strong>Nota</strong>: This method creates very precise associations between headers and data cells but it uses <strong>a lot</strong> more markup and does not leave any room for errors.  The <code>scope</code> approach is usually enough for most tables.</p>
</div>

<h3 id="Aprendizagem_ativa_manipular_scope_e_cabeçalhos">Aprendizagem ativa: manipular <em>scope</em> e cabeçalhos</h3>

<ol>
 <li>For this final exercise, we'd like you to first make local copies of <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold.html">items-sold.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a>, in a new directory.</li>
 <li>Now try adding in the appropriate <code>scope</code> attributes to make this table more appropriate.</li>
 <li>Finally, try making another copy of the starter files, and this time make the table more accessible using <code>id</code> and <code>headers</code> attributes.</li>
</ol>

<div class="note">
<p><strong>Nota</strong>: You can check your work against our finished examples — see <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html">items-sold-scope.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html">also see this live</a>) and <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html">items-sold-headers.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html">see this live too</a>).</p>
</div>

<h2 id="Resumo">Resumo</h2>

<p>There are a few other things you could learn about table HTML, but we have really given all you need to know at this moment in time. At this point, you might want to go and learn about styling HTML tables — see <a href="/en-US/docs/Learn/CSS/Styling_boxes/Styling_tables">Styling Tables</a>.</p>

<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div>

<div id="SL_balloon_obj" style="display: block;">
<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%; opacity: 1; display: none; left: -8px; top: -25px;"> </div>

<div id="SL_shadow_translation_result2" style="display: none;"> </div>

<div id="SL_shadow_translator" style="display: none;">
<div id="SL_planshet">
<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>

<div id="SL_Bproviders">
<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div>

<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div>

<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div>
</div>

<div id="SL_alert_bbl" style="display: none;">
<div id="SLHKclose" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>

<div id="SL_alert_cont"> </div>
</div>

<div id="SL_TB">
<table id="SL_tables">
 <tbody><tr>
  <td class="SL_td"><input></td>
  <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
  <td class="SL_td">
   <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Alternar Idiomas"> </div>
  </td>
  <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
  <td class="SL_td">
   <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ouça"> </div>
  </td>
  <td class="SL_td">
   <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Copiar"> </div>
  </td>
  <td class="SL_td">
   <div id="SL_bbl_font_patch"> </div>

   <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Tamanho da fonte"> </div>
  </td>
  <td class="SL_td">
   <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ajuda"> </div>
  </td>
  <td class="SL_td">
   <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div>
  </td>
 </tr>
</tbody></table>
</div>
</div>

<div id="SL_shadow_translation_result" style=""> </div>

<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>

<div id="SL_player2"> </div>

<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div>

<div id="SL_Balloon_options" style="background: rgb(255, 255, 255)  repeat scroll 0% 0%;">
<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>

<table id="SL_tbl_opt" style="width: 100%;">
 <tbody><tr>
  <td><input></td>
  <td>
   <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div>
  </td>
  <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td>
  <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td>
 </tr>
</tbody></table>
</div>
</div>
</div>