ホームページビルダー19に関する質問です。

表の枠線を細くするには、表の属性を編集するといいようです。

・表の枠に色をつけたり、太さを変更する
http://support.justsystems.com/faq/1032/app/servlet/qadoc?QID=047821

「罫線の幅」を「0」ピクセル、「枠表示」にチェックが入った状態のままで「1」ピクセルに設定してみてください。
※「セル内の余白」にも適当な数値を設定しておいた方がいいと思います。(枠線とセル内のテキスト等との間隔です。)


※CSSでも設定できるようですので、参考情報としてどうぞ。

・表の枠や線の色、種類を部分的に変更したい
http://support.justsystems.com/faq/1032/app/servlet/qadoc?QID=054066


社員紹介についてですが、そのような動作はjavascriptを使う事になると思います。
ホームページビルダーには、そのような動作を行うサンプルスクリプトは含まれていないようです。

・サンプル スクリプトの機能一覧
http://support.justsystems.com/faq/1032/app/servlet/qadoc?QID=046607


希望のような動作を行うスクリプトを書いてみたので、編集スタイルを「エディターズ」にして、HTMLソースを編集してみてください。(jQueryを使います。)

・HTML例(※名前にリンクを張る必要はありません)

<table id="seating-plan" border="1" cellspacing="0" cellpadding="3">
    <tr>
        <td class="a">A</td><td class="b">B</td><td class="c">C</td>
    </tr>
    <tr>
        <td class="e">E</td><td class="f">F</td><td class="g">G</td>
    </tr>
</table>
<div id="profile">
    <table class="a">Aのプロフィール</table>
    <table class="b">Bのプロフィール</table>
    <table class="c">Cのプロフィール</table>
    <table class="d">Aのプロフィール</table>
    <table class="e">Bのプロフィール</table>
    <table class="f">Cのプロフィール</table>
</div>

※かなり省略していますが、ポイントは以下の通りです。
・それぞれの名前を囲むtdのクラス名とプロフィールのテーブル(※エクセルからペーストすると表になるのですね？)のクラス名を同じにしておきます。
・座席表のテーブルと、プロフィールのテーブルを囲むidは別のものを指定しておきます。

・CSS例(初期状態でプロフィールをすべて非表示にするスタイルシートです。)

#profile table {display:none;}

・jQuery例

$(function(){
    $( "#seating-plan td" ).click(function() {
        var pid = $( this ).attr("class");
        $("#profile table").hide();
        $("table." + pid).show();
    });
});    

・jQuery
http://jquery.com/

・How jQuery Works
http://learn.jquery.com/about-jquery/how-jquery-works/


【※ 追記 ※】

もう一つの新しい質問の方も少し変更すると可能です。
アイコン画像の下に表示する内容のボックスを記述する場合です。

・HTML例

<img src="icon1.gif" width="130" height="55" border="0" class="menu-ico">
<p class="info">画像1の内容？</p>
<img src="icon2.gif" width="130" height="55" border="0" class="menu-ico">
<p class="info">画像2の内容？</p>
<img src="icon3.gif" width="130" height="55" border="0" class="menu-ico">
<p class="info">画像3の内容？</p>
<img src="icon4.gif" width="130" height="55" border="0" class="menu-ico">
<p class="info">画像4の内容？</p>
<img src="icon5.gif" width="130" height="55" border="0" class="menu-ico">
<p class="info">画像5の内容？</p>

※アイコン画像すべてに同じクラス名を指定しておきます。


・CSS例(初期状態で非表示にするスタイルシート)

.info {display:none;}

・jQuery例

$(function(){
    $( "img.menu-ico" ).click(function() {
        $( this ).next(".info").toggle();
    });
});

もう一つ、アイコン画像と内容のボックスを1セットにして同じ要素で囲む場合です。

・HTML例

<div class="box">
    <img src="icon1.gif" width="130" height="55" border="0">
    <p class="info">画像1の内容？</p>
</div>
<div class="box">
    <img src="icon2.gif" width="130" height="55" border="0">
    <p class="info">画像2の内容？</p>
</div>
<div class="box">
    <img src="icon3.gif" width="130" height="55" border="0">
    <p class="info">画像3の内容？</p>
</div>
<div class="box">
    <img src="icon4.gif" width="130" height="55" border="0">
    <p class="info">画像4の内容？</p>
</div>
<div class="box">
    <img src="icon5.gif" width="130" height="55" border="0">
    <p class="info">画像5の内容？</p>
</div>

※画像と内容を囲むボックス同士に同じクラス名を、さらに表示する内容のボックス同士に同じクラス名を指定しておきます。

※CSS例は上記と同じです。

・jQuery例

$(function(){
    $( "div.box" ).click(function() {
        $( this ).children(".info").toggle();
    });
});