Basic Table

There are no notes for this item.

<div class="preview">
    <section class="layout-content container-page-wrapper">
        <article class="container-left-9">
            <table class="article_table">
                <thead>
                    <tr>
                        <th>First</th>
                        <th>Second</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tabular content</td>
                        <td>Columns automatically adjust to fit the content, as you can see in this example.</td>
                    </tr>
                    <tr>
                        <td>Tabular content</td>
                        <td>Columns automatically adjust to fit the content, as you can see in this example.</td>
                    </tr>
                </tbody>
            </table>
        </article>

        <article class="container-left-9">
            <table class="article_table">
                <thead>
                    <tr>
                        <th>First</th>
                        <th>Second</th>
                        <th>Third</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tabular content</td>
                        <td>Columns automatically adjust to fit the content, as you can see in this example.</td>
                        <td>Content such as a phrase or sentence</td>
                    </tr>
                    <tr>
                        <td>Tabular content</td>
                        <td>Columns automatically adjust to fit the content, as you can see in this example.</td>
                        <td>Content such as a phrase or sentence</td>
                    </tr>
                </tbody>
            </table>
        </article>

        <article class="container-left-9">
            <table class="article_table">
                <thead>
                    <tr>
                        <th>First</th>
                        <th>Second</th>
                        <th>Third</th>
                        <th>Fourth</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tabular content</td>
                        <td>Tabular content</td>
                        <td>Columns automatically adjust to fit the content, as you can see in this example.</td>
                        <td>Tabular content</td>
                    </tr>
                    <tr>
                        <td>Tabular content</td>
                        <td>Tabular content</td>
                        <td>Columns automatically adjust to fit the content, as you can see in this example.</td>
                        <td>Tabular content</td>
                    </tr>
                    <tr>
                        <td colspan="4" class="article_table-note">
                            <strong>*</strong> Additional in context information via a note
                        </td>
                    </tr>
                </tbody>
            </table>
        </article>

        <article class="container-left-9">
            <table class="explore-subpage article_table">
                <tbody class="company subgroup subregions">
                    <tr class="name">
                        <td class="subregion-name">Company name</td>
                        <td class="subtotal numeric value">$459,701,458</td>
                        <td class="subtotal-label">total</td>
                    </tr>
                    <tr class="subtype">
                        <td class="name">Bonus</td>
                        <td class="value numeric">$248,513,811</td>
                        <td class="bar">
                            <eiti-bar value="248513810.93" min="0" max="459701458.15">
                                <span class="eiti-bar-bar" style="width: 54.0598%;"></span>
                            </eiti-bar>
                        </td>
                    </tr>
                    <tr class="subtype">
                        <td class="name">Royalties</td>
                        <td class="numeric value">$171,448,578</td>
                        <td class="bar">
                            <eiti-bar value="171448578.17000002" min="0" max="459701458.15">
                                <span class="eiti-bar-bar" style="width: 37.2956%;"></span>
                            </eiti-bar>
                        </td>
                    </tr>
                    <tr class="subtype">
                        <td class="name">AML Fees including Audits and Late Charges</td>
                        <td class="numeric value">$39,573,273</td>
                        <td class="bar">
                            <eiti-bar value="39573273.01" min="0" max="459701458.15">
                                <span class="eiti-bar-bar" style="width: 8.60847%;"></span>
                            </eiti-bar>
                        </td>
                    </tr>
                    <tr class="subtype">
                        <td class="name">Rents</td>
                        <td class="numeric value">$159,880</td>
                        <td class="bar">
                            <eiti-bar value="159880" min="0" max="459701458.15">
                                <span class="eiti-bar-bar" style="width: 0.5%;"></span>
                            </eiti-bar>
                        </td>
                    </tr>
                </tbody>
            </table>
        </article>

        <article class="container-left-9">
            <table class="article_table article_table-indented article_table-numbers">
                <thead>
                    <tr>
                        <th rowspan="2" class="article_table-left article_table-enlarge">Industry</th>
                        <th colspan="5" class="article_table-thin">Spanning header with footnote
                            <sup id="fnref:2">
                <a href="#fn:2" class="footnote">2</a>
              </sup>
                        </th>
                    </tr>
                    <tr>
                        <th>2009</th>
                        <th>2010</th>
                        <th>2011</th>
                        <th>2012</th>
                        <th>2013</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="article_table-head">
                        <td>Mining</td>
                        <td>$3,831</td>
                        <td>$5,722</td>
                        <td>$5,941</td>
                        <td>$5,249</td>
                        <td>$4,896</td>
                    </tr>
                    <tr>
                        <td>Indented subcategory</td>
                        <td>1,424</td>
                        <td>2,152</td>
                        <td>1,811</td>
                        <td>1,642</td>
                        <td>1,943</td>
                    </tr>
                    <tr>
                        <td>Indented subcategory</td>
                        <td>207</td>
                        <td>344</td>
                        <td>325</td>
                        <td>245</td>
                        <td>32</td>
                    </tr>
                </tbody>
            </table>
        </article>
    </section>
</div>
<div class="preview">
  <section class="layout-content container-page-wrapper">
    <article class="container-left-9">
      <table class="article_table">
        <thead>
          <tr>
            <th>First</th>
            <th>Second</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Tabular content</td>
            <td>Columns automatically adjust to fit the content, as you can see in this example.</td>
          </tr>
          <tr>
            <td>Tabular content</td>
            <td>Columns automatically adjust to fit the content, as you can see in this example.</td>
          </tr>
        </tbody>
      </table>
    </article>

    <article class="container-left-9">
      <table class="article_table">
        <thead>
          <tr>
            <th>First</th>
            <th>Second</th>
            <th>Third</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Tabular content</td>
            <td>Columns automatically adjust to fit the content, as you can see in this example.</td>
            <td>Content such as a phrase or sentence</td>
          </tr>
          <tr>
            <td>Tabular content</td>
            <td>Columns automatically adjust to fit the content, as you can see in this example.</td>
            <td>Content such as a phrase or sentence</td>
          </tr>
        </tbody>
      </table>
    </article>

    <article class="container-left-9">
      <table class="article_table">
        <thead>
          <tr>
            <th>First</th>
            <th>Second</th>
            <th>Third</th>
            <th>Fourth</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Tabular content</td>
            <td>Tabular content</td>
            <td>Columns automatically adjust to fit the content, as you can see in this example.</td>
            <td>Tabular content</td>
          </tr>
          <tr>
            <td>Tabular content</td>
            <td>Tabular content</td>
            <td>Columns automatically adjust to fit the content, as you can see in this example.</td>
            <td>Tabular content</td>
          </tr>
          <tr>
            <td colspan="4" class="article_table-note">
              <strong>*</strong>
              Additional in context information via a note
            </td>
          </tr>
        </tbody>
      </table>
    </article>

    <article class="container-left-9">
      <table class="explore-subpage article_table">
        <tbody class="company subgroup subregions">
          <tr class="name">
            <td class="subregion-name">Company name</td>
            <td class="subtotal numeric value">$459,701,458</td>
            <td class="subtotal-label">total</td>
          </tr>
          <tr class="subtype">
            <td class="name">Bonus</td>
            <td class="value numeric">$248,513,811</td>
            <td class="bar">
              <eiti-bar value="248513810.93" min="0" max="459701458.15">
                <span class="eiti-bar-bar" style="width: 54.0598%;"></span>
              </eiti-bar>
            </td>
          </tr>
          <tr class="subtype">
            <td class="name">Royalties</td>
            <td class="numeric value">$171,448,578</td>
            <td class="bar">
              <eiti-bar value="171448578.17000002" min="0" max="459701458.15">
                <span class="eiti-bar-bar" style="width: 37.2956%;"></span>
              </eiti-bar>
            </td>
          </tr>
          <tr class="subtype">
            <td class="name">AML Fees including Audits and Late Charges</td>
            <td class="numeric value">$39,573,273</td>
            <td class="bar">
              <eiti-bar value="39573273.01" min="0" max="459701458.15">
                <span class="eiti-bar-bar" style="width: 8.60847%;"></span>
              </eiti-bar>
            </td>
          </tr>
          <tr class="subtype">
            <td class="name">Rents</td>
            <td class="numeric value">$159,880</td>
            <td class="bar">
              <eiti-bar value="159880" min="0" max="459701458.15">
                <span class="eiti-bar-bar" style="width: 0.5%;"></span>
              </eiti-bar>
            </td>
          </tr>
        </tbody>
      </table>
    </article>

    <article class="container-left-9">
      <table class="article_table article_table-indented article_table-numbers">
        <thead>
          <tr>
            <th rowspan="2" class="article_table-left article_table-enlarge">Industry</th>
            <th colspan="5" class="article_table-thin">Spanning header with footnote
              <sup id="fnref:2">
                <a href="#fn:2" class="footnote">2</a>
              </sup>
            </th>
          </tr>
          <tr>
            <th>2009</th>
            <th>2010</th>
            <th>2011</th>
            <th>2012</th>
            <th>2013</th>
          </tr>
        </thead>
        <tbody>
          <tr class="article_table-head">
            <td>Mining</td>
            <td>$3,831</td>
            <td>$5,722</td>
            <td>$5,941</td>
            <td>$5,249</td>
            <td>$4,896</td>
          </tr>
          <tr>
            <td>Indented subcategory</td>
            <td>1,424</td>
            <td>2,152</td>
            <td>1,811</td>
            <td>1,642</td>
            <td>1,943</td>
          </tr>
          <tr>
            <td>Indented subcategory</td>
            <td>207</td>
            <td>344</td>
            <td>325</td>
            <td>245</td>
            <td>32</td>
          </tr>
        </tbody>
      </table>
    </article>
  </section>
</div>
/* No context defined for this component. */