why do you need to specify a html table width and the width of the columns

Question

what is the default behavior of browsers if the columns dont add up to the table width.

Answer 1

Column and table widths are only suggestions to most browsers. If the content is too wide the content will be wider (unless you also specify overflow properties).

If the width of columns adds up to more than the width of the table behaviour is undefined but generally browsers will either shrink the column widths and/or grow the table width so it all fits.

Answer 2

Their width will be that of the content, so say if you have a table with two colums: |hello|world| their width will be just that, if you have an image into one of these table cells then it will be that image's width, if it's empty and no width/padding/spacing is set then it will be zero.

Answer 3

The spare width will be distributed between all columns (via HTML or CSS). Width is distributed to any columns that don't have a fixed width (in HTML or CSS); if all columns have a fixed width, all columns may receive extra width.

If you are using table-layout: fixed, each column that is getting spare width will receive an equal amount. If you are using table-layout: auto (the default), the browser will try to work out which columns are more deserving by ‘guessing’ based on various unspecified browser-specific algorithms on how much content it thinks each column contains. Especially in IE and with colspan​s, this can have highly undesirable results.

Which is another reason you really want to be using table-layout: fixed at all times.