Skip to content

Commit

Permalink
Merge pull request #2972 from enkidevs/Stefan-Stojanovic-update-web-h…
Browse files Browse the repository at this point in the history
…tml-table-caption-element

Update caption.md
  • Loading branch information
Stefan-Stojanovic authored Jan 9, 2022
2 parents 90c5950 + 335727d commit dae1723
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 4 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,9 @@ Types of change:

## December 30th 2021

### Fixed
- [HTML - The Caption Element - Add minor info when to use strong, b and font-weight property to avoid confusion](https://github.com/enkidevs/curriculum/pull/2972)

### Changed
- [SQL - Join Role - Change table example](https://github.com/enkidevs/curriculum/pull/2973)

Expand Down
17 changes: 13 additions & 4 deletions web/html/tables/caption.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ links:
- >-
[HTML <caption>
Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption){documentation}
- >-
[HTML <b>
Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b){documentation}
practiceQuestion:
formats:
- fill-in-the-gap
Expand All @@ -31,16 +34,16 @@ The HTML `<caption>`, or the **Table Caption** element is used to specify a titl

Adding a clear and concise description of the table's content within the `<caption>` element is useful for helping people decide if they want to read the table or skip over it.

When used, `<caption>` element must to be the **first** element within the `<table>` element to be valid, although using CSS it can be moved accordingly. The property `caption-side` can be set to `bottom` to quickly move the caption to the bottom of the table even with it added to the top of the table.
When used, the `<caption>` element must be the **first** element within the `<table>` element to be valid, although using CSS, it can be moved accordingly. The property `caption-side` can be set to `bottom` to quickly move the caption to the bottom of the table even with it is added to the top of the table.

Example:

```html
<table>
<caption>Employee List</caption>
<tr>
<td><strong>Name</strong></td>
<td><strong>Start Date</strong></td>
<td><b>Name</b></td>
<td><b>Start Date</b></td>
</tr>
<tr>
<td>Jimmy</td>
Expand All @@ -52,7 +55,13 @@ Example:
</table>
```

> 💡 In the example above, the `<strong>` element is used to bring importance to the "Name" and "Starting Date" tags. However, it can be replaced with the `style="font-weight:bold;"` CSS property.
In the example above, the `<b>` element is used to bring attention to the "Name" and "Starting Date" tags.

If you'd like to only style the elements bold without bringing attention to them, you can apply the `style="font-weight:bold;"` CSS property:
```html
<td style="font-weight:bold"> Name </td>
<td style="font-weight:bold"> Start Date </td>
```

![table-caption](https://img.enkipro.com/ec2e595bc8ee7beb5d9882c1ae15022e.png)

Expand Down

0 comments on commit dae1723

Please sign in to comment.