Col no longer allowed to have width attribute in HTML5

The construction:

<col width="300" />
<col width="70" />
<col width="70" />
<col width="70" />
<col width="70" />
<col width="70" />

is no longer legal HTML5 nor XHTML5 (see attributes table). I needed pixel level width control for the bubble form used in my Gravic Remark Office OMR test. I prefer to have valid pages, so I needed a work-around to the above XHTML code. I knew that the solution lay in using CSS, and I opted to use CSS 3 which let me use an nth-child construction in the bubble.css file to mimic the above HTML 4.01 code:

table {border:thin solid red;width:655px}
td:nth-child(1) { width:300px }
td:nth-child(2) { width:70px }
td:nth-child(3) { width:70px }
td:nth-child(4) { width:70px }
td:nth-child(5) { width:70px }
td:nth-child(6) { width:70px }

The 655px table width is not an oversight. Although the col widths add to 650, some deep and dark part of the way tables lay out in XHTML versus CSS meant that producing a printed pixel-for-pixel match required setting the table width to the col width sum plus 5px.


Popular posts from this blog

Box and whisker plots in Google Sheets

Areca catechu leaf sheaf petiole plates

Setting up a boxplot chart in Google Sheets with multiple boxplots on a single chart