テーブルのセル(TD,TH)の幅,rowSpan,colSpanを表示するブックマークレット

テーブルのcolspan,rowspanを間違うことでレイアウトがめちゃくちゃになることが良くあります。
しかも、原因が非常にわかりにくい(T_T)

ので、作ってみました。

<TH>,<TD>タグにwidth属性が存在すればセルの上に重ねて表示します。
該当セルのborderをsolidにして、見やすくします。

javascript:(function(){d=document;g=d.all;for(i=0;i<g.length;i++){p=q=g[i];if(/T[HD]/.test(q.tagName)&&q.width!=undefined&&q.width!=""){q.style.border='1px solid blue';l=t=0;while(p!=null&&p.tagName!='BODY'){l+=p.offsetLeft;t+=p.offsetTop;p=p.offsetParent;}d.body.insertAdjacentHTML('beforeEnd','<span style=\'z-index:1;left:'+l+'px;top:'+t+'px;position:absolute;background-color:white;border:1px solid;padding:2px;filter:alpha(opacity=80)\'>'+q.width+'</span>');}}})()

セルのcolspan(横方向の結合数とrowspan(縦方向の結合数)をセルに重ねて表示

javascript:(function(){g=(d=document).all;for(i=0;i<g.length;i++){p=q=g[i];e=p.tagName;if(/T[HD]/.test(e)&&(q.rowSpan>1||q.colSpan>1)){q.style.border='1px solid blue';l=t=0;while(p!=null&&e!='BODY'){l+=p.offsetLeft;t+=p.offsetTop;p=p.offsetParent;}s='↓'+q.rowSpan+'→'+q.colSpan;d.body.insertAdjacentHTML('beforeEnd','<span style=\'z-index:1;left:'+l+'px;top:'+t+'px;position:absolute;background-color:white;border:1px solid;padding:2px;filter:alpha(opacity=65)\' title='+s+'>'+s+'</span>');}}})()

spanタグにtitle属性をつけてあるので、一部しか見えない場合はマウスを重ねれば内容が見えると思います。