Limit HTML table width

Question

I am trying to write a table so that it does not expand to the full width of the page. Below is what I have so far, but although the first columns seem to respect the width option, the last column extends to the end of the page.

All the results I found use CSS, but I'm not sure how to do this. I do not know if this is suitable, but I am writing Joomla! article.

<table class="zebra" width="300"> <thead> <tr> <th style="text-align: left;" width="100">title 1</th> <th style="text-align: center;" width="100">title 2</th> <th style="text-align: center;" width="100">title 3</th></tr> </thead> <tbody> <tr class="odd"> <td style="text-align: left;" width="100">content 1</td> <td style="text-align: center;" width="100">content 2</td> <td style="text-align: center;" width="100">content 3</td> </tr> </tbody> </table> 

Answer 1

 <table class="zebra" style="max-width:300px;">