Adding text below a table in a container - html

Question

Given the following HTML, which produces a list of charity donors and a title at the top. I'd like to add the name of the Charity at the bottom within the container.
I'm new with HTML and beginner so doing this as my first task.
CSS CODE:
/*** central column on page ***/
div #divContainer {
max-width: 50%;
margin: 0 auto;
font-family: Verdana;
padding: 1em 1em 1em 1em;
/* rounded corners */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* add gradient */
background-color: #908080;
background: -webkit-gradient (linear, left top, left bottom, from(#606060), to(#C65C65));
background: -moz-linear-gradient (top, #606060, #998880);
/* add box shadows */
-moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
/*** Donner Role ***/
table.CRG {
align="center";
vertical-align="center";
text-align:center;
border:3px solid black;
border-collapse:collapse;
}
/*** table's td element, all section ***/
table.CRG td {
color:white;
vertical-align:middle;
padding: 0.5em;
border:3px solid black;
font-weight:bold;
}
h1 {
color:#FFE47A;
font-size:1.5em;
}
HTML CODE:
<!-- CENTTERED COLUMN ON THE PAGE-->
<div id="divContainer">
<!-- HTML5 TABLE FORMATTED VIA CSS3-->
<table class="CRG" width="100%">
<!-- TABLE BODY: MAIN CONTENT from Function CRG -->
<tbody>
<h1>
<center> My Charity </center>
</h1>
<tr>
<td>Mr. Smithn</td>
</tr>
<tr>
<td>Mr. Jones</td>
</tr>
<tr>
<td>Mrs. Generous</td>
</tr>
<tr>
<td>Reserved</td>
</tr>
<tr>
<td>Reserved</td>
</tr>
<tr>
<td>Reserved</td>
</tr>
<tr>
<td>Reserved</td>
</tr>
<tr>
<td>Reserved</td>
</tr>
</tbody>
</table>
</div>
Any help would be appreciated!

Answer 1

There are so many ways that this might be handled...too numerous to put in one post. Here are just some general ideas. Though your data are "tabular" I won't focus on tables, but other options - alluding to the "old saw" - don't use tables for layout, use them for tabular data.
divs, using classes or pseudoclasses:
<div class='headerdiv'></div>
<div class='donordiv'></div>
<div class='donordiv'></div>
<div class='donordiv'></div>
<div class='donordiv'></div>
<div class='donordiv'></div>
<div class='donordiv'></div>
<div class='footerdiv'></div>
Unnumbered lists - styling using classes or pseudoclasses.
<ul>
<li class='headerlist'>
<ul>
<li class='donor'>donor1</li>
<li class='donor'>donor2</li>
<li class='donor'>donor3</li>
<li class='donor'>donor4</li>
</ul>
</li>
<li class='footerstuff'>footer stuff</li>
</ul>
If you like dls, dts etc, again styling with css classes or pseudoclasses.
<dl>
<dt>Title</dt>
<dd>donor 1</dd>
<dd>donor 2</dd>
<dd>donor 3</dd>
<dd>donor 4</dd>
<dt>Stuff</dt>
</dl>
And I'll bet there are many other ways that the experts will show us.