1. XML structure 0 p.

2. Exam 0 p.

exam-code and day-code attributes control exam-specific translations, e.g. the heading text of table of contents, and the exam title if specific e:exam-title element is missing. Currently supported exam and day code pairs can be found in https://github.com/digabi/exam-engine/blob/master/packages/mastering/src/i18n/exam_titles_fi-FI.json .

<e:exam
  xmlns:e="http://ylioppilastutkinto.fi/exam.xsd"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns="http://www.w3.org/1999/xhtml"
  xsi:schemaLocation="http://ylioppilastutkinto.fi/exam.xsd https://abitti.net/schema/exam.xsd"
  exam-schema-version="0.1"
  date="2018-09-29"
  exam-code="EA"
  exam-stylesheet="custom.css">

3. Languages and localization 0 p.

<e:languages>
  <e:language>fi-FI</e:language>
  <e:language>sv-FI</e:language>
</e:languages>
...
<e:localization lang="fi-FI">
  <p>
    Älä jätä mitään merkintöjä sellaisen tehtävän vastaukselle varattuun tilaan,
    jota et halua jättää arvosteltavaksi.
  </p>
</e:localization>
<e:localization lang="sv-FI">
  <p>
    Lämna inga anteckningar i svarsfältet för sådana uppgifter som du inte vill
    lämna in för bedömning.
  </p>
</e:localization>

<e:translation key="audio-test.instructions" />

4. Example question title 0 p.

5. Example question title 0 p.

6. Second example question title 0 p.

Vastaa joko kohtaan 6.1 tai 6.2.

7. text-answer 7 p.

There are three types of text answers. rich-text answer is intended for verbose essay-style answers, whereas single-line answer is intended for short, at most couple words, answers. integer answer is intended for integer answers.

Examinee can also attach screenshots to rich-text answers.

single-line answer example

<e:text-answer max-score="2" />

rich-text answer example

<e:text-answer type="rich-text" max-score="2" />

rich-text answer with maximum length

<e:text-answer type="rich-text" max-score="2" max-length="20" />

integer answer example

The answer can only contain digits (0...9), and optionally a minus sign (-) at the beginning

<e:text-answer type="integer" max-score="1" />

8. choice-answer 2 p.

Examples

<e:choice-answer>
  <e:choice-answer-option score="2">Lorem</e:choice-answer-option>
  <e:choice-answer-option score="0">Ipsum</e:choice-answer-option>
  <e:choice-answer-option>Dolor</e:choice-answer-option>
  <e:choice-answer-option score="-1">Sit</e:choice-answer-option>
</e:choice-answer>

Options can contain any HTML code, like images or formulas

<e:choice-answer direction="vertical">
  <e:choice-answer-option>
    <e:formula>f(x) = \sqrt{x^2}</e:formula>
  </e:choice-answer-option>
  <e:choice-answer-option>
    <e:formula>f(x) = x^3</e:formula>
  </e:choice-answer-option>
  <e:choice-answer-option>
    <e:formula>f(x) = x^4 + 3x + 5</e:formula>
  </e:choice-answer-option>
</e:choice-answer>

Horizontal direction works well for images

<e:choice-answer direction="horizontal">
  <e:choice-answer-option>
    <e:image src="example_small.jpg" />
  </e:choice-answer-option>
  <e:choice-answer-option>
    <e:image src="example.jpg" />
  </e:choice-answer-option>
  <e:choice-answer-option>
    <e:image src="example.jpg" />
  </e:choice-answer-option>
  <e:choice-answer-option>
    <e:image src="example_high.jpg" />
  </e:choice-answer-option>
  <e:choice-answer-option>
    <e:image src="example.jpg" />
  </e:choice-answer-option>
</e:choice-answer>

9. dropdown-answer 2 p.

Example

<e:dropdown-answer>
  <e:dropdown-answer-option score="2">Lorem</e:dropdown-answer-option>
  <e:dropdown-answer-option score="-1">Ipsum</e:dropdown-answer-option>
  <e:dropdown-answer-option score="-1">Dolor</e:dropdown-answer-option>
  <e:dropdown-answer-option>Sit</e:dropdown-answer-option>
</e:dropdown-answer>

10. scored-text-answer 8 p.

Example of e:scored-text-answer

<e:hints>
  Lorem ipsum,
  <e:scored-text-answer>
    <e:hint>dolor?</e:hint>
    <e:accepted-answer score="1">dolor</e:accepted-answer>
  </e:scored-text-answer>
  dolor sit amet consectetur adipisicing
  <e:scored-text-answer>
    <e:hint>elit?</e:hint>
    <e:accepted-answer score="1">elit</e:accepted-answer>
  </e:scored-text-answer>
  . Aliquam, explicabo. Ut,
  <e:scored-text-answer>
    <e:hint>vero?</e:hint>
    <e:accepted-answer score="1">vero</e:accepted-answer>
  </e:scored-text-answer>
  ? Exercitationem eos unde possimus
  <e:scored-text-answer>
    <e:hint>laboriosam?</e:hint>
    <e:accepted-answer score="1">laboriosam</e:accepted-answer>
  </e:scored-text-answer>
  , consectetur cum perspiciatis aut
  <e:scored-text-answer>
    <e:hint>dolores?</e:hint>
    <e:accepted-answer score="1">dolores</e:accepted-answer>
  </e:scored-text-answer>
  quas autem eaque impedit dolore. Blanditiis, eos doloribus.
</e:hints>

Example without hints

e:scored-text-answer can also be used without hints, e.g. in mathematics exams.

<e:formula>\frac{4{\pi}}{2}</e:formula> simplified:
<e:scored-text-answer max-score="3"/>

11. dnd-answer 8 p.

Example of e:dnd-answer

<e:question>
          <e:question-title></e:question-title>
          <e:question-instruction></e:question-instruction>
          <e:audio-group>
            <e:attachment>
              <e:attachment-title>example audio</e:attachment-title>
              <e:audio src="example1.webm" times="1"><e:audio-title>Listen to the text as a whole first.</e:audio-title></e:audio>
            </e:attachment>
          </e:audio-group>
          <e:dnd-answer-container meta='dnd answer container' dnd-type='connect'>
              <e:dnd-answer max-score="2">
                  <e:dnd-answer-title>
                    What time suits Lars best?
                    <e:audio src="example1.webm" times="1"></e:audio>
                  </e:dnd-answer-title>
                  <e:dnd-answer-option score="2">Monday, 3:00 PM</e:dnd-answer-option>
              </e:dnd-answer>
              <e:dnd-answer max-score="2">
                  <e:dnd-answer-title>
                    What time suits Katarina best?
                    <e:audio src="example1.webm" times="1"></e:audio>
                  </e:dnd-answer-title>
                  <e:dnd-answer-option score="2">Tuesday, 1:00 p.m.</e:dnd-answer-option>
              </e:dnd-answer>
              <e:dnd-answer max-score="2">
                  <e:dnd-answer-title>
                    What time suits Marit best?
                    <e:audio src="example1.webm" times="1"></e:audio>
                  </e:dnd-answer-title>
                  <e:dnd-answer-option score="2">Monday, 4:00 PM</e:dnd-answer-option>
              </e:dnd-answer>
              <e:dnd-answer-option>Monday, 1:00 PM</e:dnd-answer-option>
              <e:dnd-answer-option>Monday, 2:00 pm</e:dnd-answer-option>
              <e:dnd-answer-option>Tuesday, 2:00 pm</e:dnd-answer-option>
              <e:dnd-answer-option>Tuesday, 3:00 pm</e:dnd-answer-option>
              <e:dnd-answer-option>Tuesday, 4:00 pm</e:dnd-answer-option>
          </e:dnd-answer-container>
      </e:question>

<e:question>
        <e:question-title></e:question-title>
        <e:question-instruction></e:question-instruction>
        <e:dnd-answer-container dnd-type='connect'>
            <e:dnd-answer max-score="2">
                <e:dnd-answer-title>
                  <e:attachment>
                    <e:attachment-title>example audio</e:attachment-title>
                    <e:audio src="example1.webm"></e:audio>
                  </e:attachment>
                </e:dnd-answer-title>
                <e:dnd-answer-option score="2">
                  <e:attachment>
                    <e:attachment-title>example.jpg</e:attachment-title>
                    <e:image src="example.jpg"/>
                  </e:attachment>
                </e:dnd-answer-option>
            </e:dnd-answer>
            <e:dnd-answer-option>
              <e:attachment>
                <e:attachment-title>example.jpg</e:attachment-title>
                <e:image src="example.jpg"/>
              </e:attachment>
            </e:dnd-answer-option>
            <e:dnd-answer-option>
              <e:attachment>
                <e:attachment-title>example.jpg</e:attachment-title>
                <e:image src="example.jpg"/>
              </e:attachment>
            </e:dnd-answer-option>
        </e:dnd-answer-container>
      </e:question>

00:0000:05

(Ei vastausta)

2 p.

Vastausvaihtoehdot:

To pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel.

12. audio-answer 6 p.

An audio-answer answer type is for answering a question verbally. Microphone is required and browser has to have permission to use it. Note that operating system may also deny applications from using the microphone.

Example of e:audio-answer

<e:question>
    <e:question-title></e:question-title>
    <e:question-instruction></e:question-instruction>
    <e:audio-answer max-score="5" />
</e:question>

13. attachment 0 p.

Example of internal material

<e:attachment>
  <e:attachment-title>Title</e:attachment-title>
  <p>...HTML code...</p>
  <e:image src="example.jpg" />
  <p>...More HTML code...</p>
  <e:reference>
    <e:author>Dolor Tempor</e:author>
    <e:title>Qui ullamco non ut proident sit incididunt adipisicing</e:title>
    <e:publisher>Culpa ex</e:publisher>
    <e:publication>MEB web service</e:publication>
    <e:howpublished>Internet service</e:howpublished>
    <e:url>https://www.ylioppilastutkinto.fi/en/matriculation-examination</e:url>
    <e:publication-date>1983-05-09</e:publication-date>
    <e:reference-date>2019-04-01</e:reference-date>
    <e:translator>Travis Translator</e:translator>
    <e:modified-by>Mary Modifier</e:modified-by>
    <e:note>Free text field</e:note>
  </e:reference>
</e:attachment>

...HTML code...

...More HTML code...

Example of external material

<e:external-material>
  <e:attachment name="test-material">
    <e:attachment-title>Title 1</e:attachment-title>
    <p>...HTML code...</p>
    <e:image src="example.jpg" />
    <p>...More HTML code...</p>
    <e:reference>
      <e:author>Matriculation examination board</e:author>
    </e:reference>
  </e:attachment>
  <e:attachment name="another-test-material">
    <e:attachment-title>Title 2</e:attachment-title>
    <e:video src="example1.webm" />
    <e:reference>
      <e:author>Dolor Tempor</e:author>
      <e:title>Qui ullamco non ut proident sit incididunt adipisicing</e:title>
      <e:publisher>Culpa ex</e:publisher>
      <e:publication>MEB web service</e:publication>
      <e:howpublished>Internet service</e:howpublished>
      <e:url>https://www.ylioppilastutkinto.fi/en/matriculation-examination</e:url>
      <e:publication-date>1983-05-09</e:publication-date>
      <e:reference-date>2019-04-01</e:reference-date>
      <e:translator>Travis Translator</e:translator>
      <e:modified-by>Mary Modifier</e:modified-by>
      <e:note>Free text field</e:note>
    </e:reference>
  </e:attachment>
</e:external-material>

Example of exam-specific external material

<e:exam ...>
  ...
  <e:table-of-contents />
  <e:external-material>
    <e:attachment>
      <e:attachment-title>Exam-specific external material title</e:attachment-title>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Aspernatur, libero sunt. Eos corporis quam fugiat maiores
          expedita quidem quaerat, quos voluptatem similique quae cum.
          Voluptate iste sed facere cum omnis.</p>
      <e:reference>
        <e:author>YTL</e:author>
      </e:reference>
    </e:attachment>
  </e:external-material>
  <e:section>
    ...

14. image 0 p.

Example

<e:image src="example.jpg">
  <e:image-title>Optional image title text</e:image-title>
</e:image>

Optional image title text

15. image-overlay 0 p.

Example

<e:image-overlay>
  <e:image src="map-example-1.jpg">
    <e:image-title>Topographic Map</e:image-title>
  </e:image>
  <e:image src="map-example-2.jpg">
    <e:image-title>Public Transport Map
  </e:image>
  <e:image src="map-example-3.jpg">
    <e:image-title>Bike Lanes Map<e:image-title>
  </e:image>
</e:image-overlay>

Topographic Map

Public Transport Map

Bike Lanes Map

Example maps © OpenStreetMap contributors

16. audio 0 p.

Examples

<e:audio src="example1.webm" times="2">
  <e:audio-title>Optional description</e:audio-title>
</e:audio>

<e:audio src="example1.webm">
  <e:audio-title>Optional description</e:audio-title>
</e:audio>

17. audio-group 6 p.

Example

<e:audio-group>
  <e:audio src="example1.webm" times="2">
    <e:audio-title>The whole recording<e:audio-title>
  </e:audio>
</e:audio-group>
<e:audio-group>
  <e:question>
    <e:question-title>Kuuntelumonivalinta</e:question-title>
    <e:choice-answer>
      <e:choice-answer-option score="2">Lorem</e:choice-answer-option>
      <e:choice-answer-option score="0">Ipsum</e:choice-answer-option>
      <e:choice-answer-option>Dolor</e:choice-answer-option>
      <e:choice-answer-option score="-1">Sit</e:choice-answer-option>
    </e:choice-answer>
  </e:question>
  <e:question>
    <e:question-title>Kuuntelumonivalinta</e:question-title>
    <e:choice-answer>
      <e:choice-answer-option score="2">Lorem</e:choice-answer-option>
      <e:choice-answer-option score="0">Ipsum</e:choice-answer-option>
      <e:choice-answer-option>Dolor</e:choice-answer-option>
      <e:choice-answer-option score="-1">Sit</e:choice-answer-option>
    </e:choice-answer>
  </e:question>
  <e:audio src="example2.webm" times="2">
    <e:audio-title>The passage related to questions 11.1. and 11.2.</e:audio-title>
  </e:audio>
</e:audio-group>
<e:audio-group>
  <e:question>
    <e:question-title>Kuuntelumonivalinta</e:question-title>
    <e:choice-answer>
      <e:choice-answer-option score="2">Lorem</e:choice-answer-option>
      <e:choice-answer-option score="0">Ipsum</e:choice-answer-option>
      <e:choice-answer-option>Dolor</e:choice-answer-option>
      <e:choice-answer-option score="-1">Sit</e:choice-answer-option>
    </e:choice-answer>
  </e:question>
  <e:audio src="example3.webm" times="2">
    <e:audio-title>The passage related to question 11.3.<e:audio-title>
  </e:audio>
</e:audio-group>

18. video 0 p.

Example

<e:video src="example1.webm" />

19. file 0 p.

Exmaple

<e:file src="example1.webm">Text of the file link</e:file>

20. attachment-link 0 p.

Example

<e:attachment-link ref="test-material" />
<e:attachment-link ref="another-test-material" type="short" />

21. attachment-links 0 p.

Example

<e:attachment-links>
  <e:attachment-link ref="test-material" />
  <e:attachment-link ref="another-test-material" />
</e:attachment-links>
<e:attachment-links type="short">
  <e:attachment-link ref="test-material" />
  <e:attachment-link ref="another-test-material" />
</e:attachment-links>

22. Adding formulas 0 p.

Notice that certain characters in formulas require special notation.

For longer formulas also <e:formula> <![CDATA[ latex-code ]]> </e:formula> may also be used. Inside a CDATA-block escaping is not required.

Example of an inline formula

<e:formula>\int_0^\infty e^{-x^2} dx=\frac{\sqrt{\pi}}{2}</e:formula>

\int_0^\infty e^{-x^2} dx=\frac{\sqrt{\pi}}{2}

Example of a display formula

<e:formula mode="display">\int_0^\infty e^{-x^2} dx=\frac{\sqrt{\pi}}{2}</e:formula>

\int_0^\infty e^{-x^2} dx=\frac{\sqrt{\pi}}{2}

Example of a assistive-title

<e:formula assistive-title="10/36 &gt; 9/36 =1/4">\frac{10}{36}&gt;\frac{9}{36}=\frac{1}{4}</e:formula>

10/36 > 9/36 =1/4

23. Typography 0 p.

Title

All common header levels are in use.

<h1>h1. Title (40px, light)</h1>
<h2>h2. Title (30px, normal)</h2>
<h3>h3. Title (21px, semibold)</h3>
<h4>h4. Title (18px, semibold)</h4>
<h5>h5. Title (16px, semibold)</h5>
<h6>h6. Title (16px, semibold)</h6>

Text size

Text size can be modified using e-font-size-* classes.

<p class="e-font-size-xxxl">.e-font-size-xxxl: (40px)</p>
<p class="e-font-size-xxl">.e-font-size-xxl: (30px)</p>
<p class="e-font-size-xl">.e-font-size-xl: (21px)</p>
<p class="e-font-size-l">.e-font-size-l: (18px)</p>
<p class="e-font-size-m">.e-font-size-m: (16px, tekstin oletuskoko)</p>
<p class="e-font-size-s">.e-font-size-s: (14px)</p>
<p class="e-font-size-xs">.e-font-size-xs: (12px)</p>

Typefaces

Typeface can be modified using e-semibold , e-light , e-italic , and e-normal classes.

<p class="e-semibold">.e-semibold: Lorem ipsum dolor sit amet</p>
<p class="e-light">.e-light: Lorem ipsum dolor sit amet</p>
<p class="e-italic">.e-italic: Lorem ipsum dolor sit amet</p>
<p class="e-normal">.e-normal: Lorem ipsum dolor sit amet</p>
<p class="e-underline">.e-underline: Lorem ipsum dolor sit amet</p>

Text positioning

Text can be positioned both horizontally and vertically by using e-text-* classes.

Text helper classes

Quotes

Short quotes can be defined using blockquote element.

<blockquote>
  <p>
    Consectetur quis ad fugiat ad. Do consequat sunt sit non commodo. Fugiat
    laborum Lorem sint laboris cupidatat ipsum eiusmod. Incididunt
    exercitation nostrud duis nulla deserunt consectetur aliquip aliquip
    cupidatat. In reprehenderit aliquip velit anim pariatur. Lorem cillum
    irure cupidatat veniam non incididunt enim commodo. Cillum pariatur
    tempor excepteur laboris tempor exercitation consequat laboris
    adipisicing duis proident proident amet.
  </p>
  <p>—https://www.ylioppilastutkinto.fi</p>
</blockquote>

Contents can also be highlighted using e-box class.

<div class="e-box">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero
  repudiandae sequi sapiente cumque necessitatibus ex voluptates
  ullam eveniet consequuntur nulla suscipit laboriosam fugiat, soluta
  repellat dolor quibusdam incidunt tempora. Suscipit.
</div>

24. Lists 0 p.

<ol class="e-list-lower-alpha">
  <li>Eka</li>
  <li>Toka</li>
  <li>Kolmas</li>
</ol>

<ol class="e-list-upper-alpha">
  <li>Eka</li>
  <li>Toka</li>
  <li>Kolmas</li>
</ol>

<ol class="e-list-lower-roman">
  <li>Eka</li>
  <li>Toka</li>
  <li>Kolmas</li>
</ol>

<ol class="e-list-upper-roman">
  <li>Eka</li>
  <li>Toka</li>
  <li>Kolmas</li>
</ol>

Unordered list of words

<ul class="e-list-wordcloud">
  <li>Sana</li>
  <li>Moniosainen ilmaisu</li>
  <li>Kolmas sana</li>
  <li>Neljäs</li>
  <li>Viides</li>
  <li>Kuudes</li>
  <li>Seitsemäs ilmaisu</li>
  <li>Kahdeksas</li>
  <li>Yhdeksäs</li>
  <li>Kymmenes pidempi muoto</li>
  <li>Yhdestoista</li>
</ul>

25. Floating 0 p.

Example

<div class="e-clearfix">
  <e:image src="example.jpg" class="e-width-half e-mrg-r-2 e-float-left" />
  <p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="e-clearfix">
  <e:image src="example.jpg" class="e-width-third e-mrg-l-2 e-float-right" />
  <p>Lorem ipsum dolor sit amet.</p>
</div>

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

26. Illustration images 0 p.

Example

<e:image src="example.jpg" class="e-illustration-right e-width-third" />
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos
  dolores quam facere vel cum eos enim eaque soluta? Ullam doloribus
  explicabo commodi numquam suscipit iste recusandae illum laboriosam
  dolorum ducimus?
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea
  officiis adipisci odit neque quam corporis voluptatibus iste
  veritatis libero tempora eius nihil facilis tempore, sit sunt enim
  exercitationem. Suscipit, fugit?
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed rerum
  necessitatibus vero illo porro voluptatum fuga et quibusdam
  voluptates adipisci veniam, quas natus exercitationem atque
  voluptas tempora accusamus voluptate culpa!
</p>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos dolores quam facere vel cum eos enim eaque soluta? Ullam doloribus explicabo commodi numquam suscipit iste recusandae illum laboriosam dolorum ducimus?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea officiis adipisci odit neque quam corporis voluptatibus iste veritatis libero tempora eius nihil facilis tempore, sit sunt enim exercitationem. Suscipit, fugit?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed rerum necessitatibus vero illo porro voluptatum fuga et quibusdam voluptates adipisci veniam, quas natus exercitationem atque voluptas tempora accusamus voluptate culpa!

27. Margins and paddings 0 p.

<div>
  <span class="e-pad-1">e-pad-1</span>
  <span class="e-pad-2">e-pad-2</span>
  <span class="e-pad-4">e-pad-4</span>
  <span class="e-pad-8">e-pad-8</span>
</div>
<div>
  <span class="e-pad-l-1">e-pad-l-1</span>
  <span class="e-pad-l-2">e-pad-l-2</span>
  <span class="e-pad-l-4">e-pad-l-4</span>
  <span class="e-pad-l-8">e-pad-l-8</span>
</div>
<div>
  <span class="e-pad-r-1">e-pad-r-1</span>
  <span class="e-pad-r-2">e-pad-r-2</span>
  <span class="e-pad-r-4">e-pad-r-4</span>
  <span class="e-pad-r-8">e-pad-r-8</span>
</div>
<div>
  <span class="e-pad-x-1">e-pad-x-1</span>
  <span class="e-pad-x-2">e-pad-x-2</span>
  <span class="e-pad-x-4">e-pad-x-4</span>
  <span class="e-pad-x-8">e-pad-x-8</span>
</div>
<div>
  <span class="e-pad-y-1">e-pad-y-1</span>
  <span class="e-pad-y-2">e-pad-y-2</span>
  <span class="e-pad-y-4">e-pad-y-4</span>
  <span class="e-pad-y-8">e-pad-y-8</span>
</div>

28. Tables 0 p.

<table class="e-table e-width-full">
  <caption>Table title</caption>
  <thead>
    <tr>
      <th>First column</th>
      <th>Second column</th>
      <th>Third column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem</td>
      <td>Ipsum</td>
      <td>Dolor</td>
    </tr>
  </tbody>
</table>

<table class="e-table e-table--borderless e-width-full">
  <caption>Table title</caption>
  <thead>
  <tr>
      <th>First column</th>
      <th>Second column</th>
      <th>Third column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem</td>
      <td>Ipsum</td>
      <td>Dolor</td>
    </tr>
  </tbody>
</table>

<table class="e-table e-table--borderless e-table--zebra e-width-full">
  <caption>Table title</caption>
  <thead>
  <tr>
      <th>First column</th>
      <th>Second column</th>
      <th>Third column</th>
  </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem</td>
      <td>Ipsum</td>
      <td>Dolor</td>
    </tr>
    <tr>
      <td>Ipsum</td>
      <td>Dolor</td>
      <td>Lorem</td>
    </tr>
    <tr>
      <td>Dolor</td>
      <td>Lorem</td>
      <td>Ipsum</td>
    </tr>
    <tr>
      <td>Lorem</td>
      <td>Ipsum</td>
      <td>Dolor</td>
    </tr>
  </tbody>
</table>

Cells can be formatted using e.g. e-pad-* or e-text-* classes.

<table class="e-table e-width-full">
  <caption>Table title</caption>
  <thead>
    <tr>
      <th class="e-pad-l-8">First column (padding to the left)</th>
      <th class="e-text-center">Second column (centered)</th>
      <th class="e-text-right">Third column (aligned to the right)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="e-pad-l-8">Lorem</td>
      <td class="e-text-center">Ipsum</td>
      <td class="e-text-right">Dolor</td>
    </tr>
  </tbody>
</table>

If a table is very wide, you can prevent it from overflowing and make it scrollable by wrapping it in an .e-scrollable-x element.

<div class="e-scrollable-x">
  <table class="e-table">
    …
  </table>
</div>

29. Text columns 0 p.

Example

By default columns have equal width

<div class="e-columns">
  <div class="e-column">e-column</div>
  <div class="e-column">e-column</div>
  <div class="e-column">e-column</div>
  <div class="e-column">e-column</div>
</div>

You can also use a 12 column system

<div class="e-columns">
  <div class="e-column e-column--6">e-column--6</div>
  <div class="e-column e-column--3">e-column--3</div>
  <div class="e-column e-column--3">e-column--3</div>
</div>

<div class="e-columns">
  <div class="e-column e-column--8">e-column--8</div>
  <div class="e-column e-column--2">e-column--2</div>
  <div class="e-column e-column--2">e-column--2</div>
</div>

<div class="e-columns">
  <div class="e-column e-column--2">e-column--2</div>
  <div class="e-column e-column--8">e-column--8</div>
  <div class="e-column e-column--2">e-column--2</div>
</div>

To make column as narrow as possible, use e-column--narrow class.

<div class="e-columns">
  <div class="e-column">e-column</div>
  <div class="e-column e-column--narrow">e-column--narrow</div>
</div>