Here is my suggested HTML solution for you to add captions to your tables using the <caption> tag to match the captions feature (if only in appearance) of the captions in your PAT Word report. A little styling and you will have a professional-looking result!

Source details table for Research Question 7
Author(s)/Organisation/Publisher MisterFoxOnline
Name of website Stylus
Name of webpage Adding captions to tables in HTML
Date created/updated 8 October 2020 / 12 May 2021
Date accessed 11 September 2020
URL https://www.stylus.co.za/adding-captions-to-tables-in-html/

The code below has one or two extra-curricular features in it. You know the border & cellpadding attributes, but the style attribute is an inline CSS rule and the <thead> and <tbody> tags are not in the syllabus.

<table border="1" cellpadding="10" style="border-collapse: collapse;">
	<caption>Source details table for Research Question 7</caption>
	<thead>
		<tr>
		<th>Author(s)/Organisation/Publisher</th>
		<td>MisterFoxOnline</td>
		</tr>
	</thead>
	<tbody>
		<tr>
		<th>Name of website</th>
		<td>Stylus</td>
		</tr>
		<tr>
		<th>Name of webpage</th>
		<td>Adding captions to tables in HTML</td>
		</tr>
		<tr>
		<th>Date created/updated</th>
		<td>8 October 2020 / 12 May 2021</td>
		</tr>
		<tr>
		<th>Date accessed</th>
		<td>11 September 2020</td>
		</tr>
		<tr>
		<th>URL</th>
		<td><a href="https: www.stylus.co.za="" adding-captions-to-tables-in-html="" "="">https://www.stylus.co.za/adding-captions-to-tables-in-html/</a></td>
		</tr>
	</tbody>
</table>

You can style the <caption> tag and even though it must be inserted immediately after the <table> tag in your code, you can position it at the bottom of the table using CSS:

Source details table for Research Question 7
Author(s)/Organisation/Publisher MisterFoxOnline
Name of website Stylus
Name of webpage Adding captions to tables in HTML
Date created/updated 8 October 2020 / 12 May 2021
Date accessed 11 September 2020
URL https://www.stylus.co.za/adding-captions-to-tables-in-html/
<table border="1" cellpadding="10" style="border-collapse: collapse;">
	<caption style="caption-side: bottom; text-align: right; font-size: small;">Source details table for Research Question 7</caption>
	<thead>
		<tr>
		<th>Author(s)/Organisation/Publisher</th>
		<td>MisterFoxOnline</td>
		</tr>
	</thead>
	<tbody>
		<tr>
		<th>Name of website</th>
		<td>Stylus</td>
		</tr>
		<tr>
		<th>Name of webpage</th>
		<td>Adding captions to tables in HTML</td>
		</tr>
		<tr>
		<th>Date created/updated</th>
		<td>8 October 2020 / 12 May 2021</td>
		</tr>
		<tr>
		<th>Date accessed</th>
		<td>11 September 2020</td>
		</tr>
		<tr>
		<th>URL</th>
		<td><a href="https://www.stylus.co.za/adding-captions-to-tables-in-html/">https://www.stylus.co.za/adding-captions-to-tables-in-html/</a></td>
		</tr>
	</tbody>
</table>

See the Pen HTML5 table caption by David Fox (@foxbeefly) on CodePen.dark

Read more here: https://www.w3schools.com/tags/tag_caption.asp

By MisterFoxOnline

CAT Educator

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.