<h1>Tables with captions</h1>
<h2>Default</h2>
<p>You can style the caption as you would any other text element.</p>
<table>
	<caption>Source details table for Research Question 1</caption>
	<thead>
		<tr>
			<th colspan="2">Question 1 Source details: website</th>
		</tr>

	</thead>
	<tbody>
		<tr>
			<td>Author(s)/Organisation/Publisher</td>
			<td>D Fox</td>
		</tr>
		<tr>
			<td>Name of website</td>
			<td>stylus</td>
		</tr>
		<tr>
			<td>Name of webpage</td>
			<td>Adding captions to tables in HTML</td>
		</tr>
		<tr>
			<td>Date created/updated</td>
			<td>8 October 2020</td>
		</tr>
		<tr>
			<td>Date accessed</td>
			<td>9 October 2020</td>
		</tr>
		<tr>
			<td>URL</td>
			<td><a href="http://www.stylus.co.za/adding-captions-to-tables-in-html/" target="_blank">http://www.stylus.co.za/adding-captions-to-tables-in-html</td>
		</tr>
	</tbody>
</table>
<h2>Bottom</h2>
<table>
	<caption style="caption-side: bottom; text-align: right;">Source details table for Research Question 2</caption>
	<thead>
		<tr>
			<th colspan="2">Question 2 Source details: website</th>
		</tr>

	</thead>
	<tbody>
		<tr>
			<td>Author(s)/Organisation/Publisher</td>
			<td>w3schools.com</td>
		</tr>
		<tr>
			<td>Name of website</td>
			<td>w3schools.com</td>
		</tr>
		<tr>
			<td>Name of webpage</td>
			<td>HTML &lt;caption&gt; Tag</td>
		</tr>
		<tr>
			<td>Date created/updated</td>
			<td>N/A</td>
		</tr>
		<tr>
			<td>Date accessed</td>
			<td>9 October 2020</td>
		</tr>
		<tr>
			<td>URL</td>
			<td><a href="https://www.w3schools.com/tags/tag_caption.asp" target="_blank">https://www.w3schools.com/tags/tag_caption.asp</a></td>
		</tr>
	</tbody>
</table>
<h2>Alignment</h2>
<table>
	<caption style="text-align: right;">Source details table for Research Question 3</caption>
	<thead>
		<tr>
			<th colspan="2">Question 3 Source details: PDF</th>
		</tr>

	</thead>
	<tbody>
		<tr>
			<td>Author</td>
			<td>F Avrakotos</td>
		</tr>
		<tr>
			<td>Title</td>
			<td>Computer Applications Technology Theory Concepts</td>
		</tr>
		<tr>
			<td>Date published</td>
			<td>April 2018</td>
		</tr>

	</tbody>
</table>
caption {
	font-style: italic;
	background-color: #C3C3C3;
	padding: 0.5em;
}
/* all for prettiness */

* {
	font-family: Arial;
}
h1,
h2 {
	color: #ffffff;
	background-color: #ff9900;
}
table {
	min-width: 90%;
	border-collapse: collapse;
}

table,
th,
td {
	border: 1px solid black;
}

th,
td {
	padding: 10px;
}

tr > :first-child {
	font-weight: bold;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.