How to format HTML tables in Blogger to fit the available space

I sometimes have to use tables in my posts, and it always causes me trouble to format them properly to fit the available width of my blog. So I decided to post a note about the formatting I use.
This is kind of a repost of this post.

Here you can read about the general usage of tables. Please do so.

If I have to shrink a table width to fit inside the blog width I use this setting in the <table> tag:
<table border="1" cellspacing="0" style="table-layout: fixed; width: 100%;" >

If I have to stretch the table width I simply use this setting in the <table> tag:
<table  style="width: 100%;" >

How to set up a Send to Kindle Button on Google Blogger

1. Visit The Send to Kindle Button for Websites page to generate design and code for your button:
http://www.amazon.com/gp/sendtokindle/developers/button

When generating the code for your button select the "Blogger / Blogspot" option twice, if you do not use the dinamic view on your blog.
If you use dinamic view, and you successfully install the Send to Kindle button on your blog, please do leave me a comment about how you did it! Thank you in advance!

2.1. Go to your Blogger home: https://www.blogger.com/home
2.2. Go to the Template menu of your blog.
2.3. Select Edit HTML button under the Live on Blog thumbnail.

3.1. Insert the "Step 1" code before the closing body tag.
3.2. Change the "&" to "&" in the code so the xml can understand it.
3.3. Click Save Template to see that you do not get any errors. If you get errors, google on the error message to solve your problems.

4.1. Insert the "Step 2" code in the "b:includable id='shareButtons' var='post'" section before the closing b:includable tag to have it together with the other shareButtons. (shareButtons have to be enabled from the Layout menu: edit Blog Entry and tick "Show Share Buttons".)
4.2. Click Save Template to see that you do not get any errors. If you get errors, google on the error message to solve your problems.

5. Check your blog, it now has a Send to Kindle button where ever you put it.

Word Wrapping inside tables on Blogger

I've had a little difficulty with one of my blogs.
I wanted to do a table with 3 columns, however, whatever I set for table with or column with it did nothing to fit the table into the required space.

Here's the solution, that worked for me:

<table style="table-layout: fixed; width: 100%;">
<tbody>
<tr><td style="word-wrap: break-word;">LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord</td></tr>
</tbody></table>

Embedding code on Blogger

Thank you for NYRPNZ for the following solution, and css-tricks for the text wrapping part:

By default, you can use <code> and </code> in Blogger to keep the formatting of a code intact, and to differenciate it from the rest of the text. However, with this tweak you can create a new tag that will put an eye-catching ugly gray box in your post to surround your code.

Customize your Template, go into advanced, and then select the "Add CSS" subcategory. Insert this code (By the way, this is what the code will actually look like on your site when you have finished):

pre {
  background-color: #DFDFDF;
  color: #000000;
  border: 1px dotted gray;
  width: 95%;
  padding: 10px;
/* to make the text inside the pre tag wrap: */
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Now to embed code, switch to HTML mode, paste the code into your post, then surround it with <pre><code>and </code></pre> like this:

<pre><code>
import pygame
from pygame.locals import *

print "Pygame imported without errors."
 </code></pre>

Important Note: In case you actually have <> brackets in your code, you will have to replace them with < for < signs and > for > signs. In case you actually need to embed an ampersand followed by some characters followed by a semicolon, you will need to replace the ampersand with &. Yes, this is annoying. Unfortunately I can find no better way to do this on Blogger at the moment.