Here is my suggested HTML solution for you to add captions to your tables to match the captions feature (if only in appearance) of the captions in your PAT Word report. A little styling and you could 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.