William Grimsley William Grimsley - 1 month ago 6
CSS Question

How Do I Use A Table As A Footer?

I'm trying to use a table that is currently at the bottom of my page as a footer which needs to be at the bottom of the page and doesn't move as your scroll up and down the page.

Here is what I have so far:

HTML:

<table>
<tr>
<td class="footer">Weather&nbsp;Station&nbsp;Davis Vantage Pro2</td>
<td class="footer">Page&nbsp;Updated&nbsp;14:46 01 November 2016</td>
<td class="footer">Powered&nbsp;By&nbsp;<a href="http://sandaysoft.com/products/cumulus" target="_blank">Cumulus</a>&nbsp;v3.0.0&nbsp;(3041)</td>
</tr>
</table>


CSS:

.footer {
font-size: 10pt;
background-color: #FFFFFF;
color: #000000;
padding: 3px;
text-align: center;
}


I have tried using tbody tags but nothing changed.

Thanks,

William

Answer

Tables are not recommended for layouting. Use the proper tags for the different page sections. In this case <footer> would be appropriate. Just use div tags for your footer data and set display: inline-block; for them to appear next to each other.

Also you can use position: fixed; in combination with bottom: 0; to make your footer stick to the bottom. I rebuild your code for your reference:

footer > div {
  font-size: 10pt;
  background-color: #FFFFFF;
  color: #000000;
  padding: 3px;
  text-align: center;
  display: inline-block;
}
footer {
  position: fixed;
  bottom: 0;
}
<footer>
  <div>Weather&nbsp;Station&nbsp;Davis Vantage Pro2</div>
  <div>Page&nbsp;Updated&nbsp;14:46 01 November 2016</div>
  <div>Powered&nbsp;By&nbsp;<a href="http://sandaysoft.com/products/cumulus" target="_blank">Cumulus</a>&nbsp;v3.0.0&nbsp;(3041)</div>
</footer>

See more about the <footer> tag on MDN.

Comments