Beginner [Exercise 2: Markdown tables] (Training slides exercise)

Templates Exercises
, , , ,
1
  • Build a table with 3 columns and 4 rows (5 including the header).
  • The first column should have a width value of 20% and be aligned to the left, the second one of 40% and aligned to the left and the third one should extend taking the remaining width of the page being aligned to the center.
  • The contents of the last row should be formatted in bold whilst the third column should be in italics (bear in mind that the total market share is both in bold and italics).
  • Use the text below to input the contents of the table and show the borders accordingly. The final output should look like this:

|862px;x145px;

2

Solution using Markdown:

{% stripnewlines %}
|Product
|Country
|Market share
{% newline %}
|---20%-----
|---40%-----
|:---------:+
{% newline %}
|] A 
|] Europe
|] *20%* [
{% newline %}
|] B 
|] Asia
|] *50%* [
{% newline %}
|] C
|] Africa
|] *30%* [
{% newline %}
|^^  ^^
|^^ **Total** ^^
|^^ ***100%*** ^^
{% endstripnewlines %}

Solution using HTML Tables:

<table class="usr-width-100">
  <thead>
    <tr>
      <th class="usr-width-20"><b>Product</b></th>
      <th class="usr-width-40"><b>Country</b></th>
      <th class="usr-align-center"><b>Market share</b></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="usr-line-top usr-line-left usr-line-right">A </td>
      <td class="usr-line-top usr-line-left usr-line-right">Europe</td>
      <td class="usr-align-center usr-line-top usr-line-left usr-line-right"><em>20%</em></td>
    </tr>
    <tr>
      <td class="usr-line-left usr-line-right">B </td>
      <td class="usr-line-left usr-line-right">Asia</td>
      <td class="usr-align-center usr-line-left usr-line-right"><em>50%</em></td>
    </tr>
    <tr>
      <td class="usr-line-left usr-line-right">C </td>
      <td class="usr-line-left usr-line-right">Africa</td>
      <td class="usr-align-center usr-line-left usr-line-right"><em>30%</em></td>
    </tr>   
    <tr>
      <td class="usr-double-line-top"> </td>
      <td class="usr-double-line-top"><b>Total</b></td>
      <td class="usr-align-center usr-double-line-top"><b><em>100%</em></b></td>
    </tr>
  </tbody>
</table>