Tables, audio, video, embedded content and special characters

Not everything fits in paragraphs and lists. Prices, schedules and comparisons call for tables. A portfolio may include a showreel, a podcast clip or a map. In this lesson you will learn to present data in tables, add audio and video, embed external content carefully, and write special characters such as the less-than sign correctly.

When to use a table

A table is for tabular data: information that makes sense in rows and columns, like a price list or a timetable. It is not a layout tool. In the past people used tables to position things on the page, which is a bad practice today. For layout we have Flexbox and Grid, which you will meet in chapter 4.

The anatomy of a table

Here is a price list for the photography services of our fictional portfolio:

<table>
  <caption>Photography services and rates</caption>
  <thead>
    <tr>
      <th scope="col">Service</th>
      <th scope="col">Duration</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Portrait session</th>
      <td>1 hour</td>
      <td>80</td>
    </tr>
    <tr>
      <th scope="row">Family session</th>
      <td>2 hours</td>
      <td>150</td>
    </tr>
  </tbody>
</table>

• table wraps everything.
• caption gives the table a title, which also helps assistive technologies.
• thead, tbody and (optionally) tfoot group the header, body and footer rows.
• tr is a table row.
• th is a header cell and td a data cell.
• scope="col" or scope="row" says whether a header applies to its column or its row. This helps screen readers announce the right header for each cell.

Merging cells

Use colspan to make a cell span several columns and rowspan for several rows. Keep tables simple, though: complex merged cells are hard to understand with a screen reader. If a table becomes complicated, consider splitting it in two.

<tr>
  <td colspan="3">Prices exclude travel costs.</td>
</tr>

Audio

The audio element plays sound. The controls attribute displays the browser’s player so the visitor can press play, pause and adjust the volume.

<audio controls src="media/interview.mp3">
  Your browser does not support audio.
  <a href="media/interview.mp3">Download the recording</a>
</audio>

The text inside the element is a fallback for very old browsers. Browsers support different audio formats, so you can offer several with nested source elements; the browser picks the first one it can play:

<audio controls>
  <source src="media/interview.ogg" type="audio/ogg">
  <source src="media/interview.mp3" type="audio/mpeg">
</audio>

Video

The video element works in a very similar way:

<video controls width="640" poster="images/showreel-cover.jpg">
  <source src="media/showreel.webm" type="video/webm">
  <source src="media/showreel.mp4" type="video/mp4">
  <track kind="captions" src="media/showreel.en.vtt" srclang="en" label="English">
  Your browser does not support video.
</video>

• controls shows the player buttons.
• poster is an image displayed before the video starts.
• track adds captions or subtitles from a text file, which is essential for people who are deaf or hard of hearing, and for anyone watching without sound.

Autoplay and respect for visitors

The autoplay attribute starts playback on its own, but browsers often block it for sound, and it irritates many visitors. Avoid it. Likewise, do not start sound without the user asking. A video that is large in file size also slows down your page. Use short clips, and consider whether a link to a video hosting service would serve you better than hosting the file yourself.

Embedding external content

Sometimes you want to display another site’s content inside your page: a map, a hosted video, a slideshow. The iframe element creates a window onto another page. Most services give you the code to copy, which looks like this:

<iframe src="https://www.example.org/embed/12345"
        title="Map showing my studio location"
        width="600" height="400"
        loading="lazy"></iframe>

Always provide a title to describe the frame for screen reader users. loading="lazy" delays loading until the visitor scrolls near it.

Special characters: entities

Some characters have a special meaning in HTML. The less-than sign < begins a tag, and the ampersand & begins a character reference. To display them as text, write an entity:

The non-breaking space keeps two words together on the same line, for example a number and its unit. It is not a way to add extra spacing: use CSS for that.

Because your file is saved in UTF-8 and you declared <meta charset="UTF-8">, you can type accented letters and symbols such as é, ü, € or © directly. Entities are mostly needed for the characters that HTML itself reserves, and when you show HTML code on a page, as this very course does.

<p>To make a paragraph, write &lt;p&gt;text&lt;/p&gt;.</p>

When you want to show a block of code, place it in <pre><code>: pre preserves line breaks and spaces, and code marks it as code.

Your turn

Add a “Services” page to your portfolio.

1. Create services.html with the usual skeleton and your menu.
2. Add a table with a caption, three columns (service, duration, price) and at least three rows. Use th with scope for headers.
3. Below it, add a paragraph that shows the sentence: Use the tag <img> for pictures & the tag <a> for links. Write the special characters correctly.
4. If you have a short audio or video file, add it with a player and a fallback; otherwise, write the code for it and comment it out.

<table>
  <caption>My services</caption>
  <thead>
    <tr><th scope="col">Service</th><th scope="col">Duration</th><th scope="col">Price</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Portrait</th><td>1 hour</td><td>80</td></tr>
    <tr><th scope="row">Event coverage</th><td>4 hours</td><td>300</td></tr>
    <tr><th scope="row">Illustration</th><td>On request</td><td>From 60</td></tr>
  </tbody>
</table>
<p>Use the tag &lt;img&gt; for pictures &amp; the tag &lt;a&gt; for links.</p>