对于实际使用的分段映射，我们通常需要显示一个“block”并用颜色表示。使用<table>标签比较复杂。一个更好的方法是生成字符次序，即一段时间之后是间隔，这一间隔允许在任何位置给文本以颜色化。

    为了使得分段映射更加有用，我们想列出鼠标位置的block信息，并且突出组成这一片段的block，我们可以使用<a>标签。首先，生成一个指定a和a:hover的类型，然后建立每一Oracle数据库段的类型： 

   <style type="text/css">
    a
    {
    　text-decoration: none;
    　font-family: monospace;
    　font-size: 6pt;
    }
    a:hover {background-color: yellow}
    a.free {background-color: white}
    a.cache {background-color: #FFCC00}
    a.cluster {background-color: #9A0000}
    a.index {background-color: #009900}
    a.lobindex {background-color: #9AFE66}
    a.lobsegment {background-color: #9A99FF}
    a.rollback {background-color: #FF3300}
    a.temporary {background-color: #DFFEFF}
    a.table {background-color: #003399}
    a.other {background-color: magenta}
    body
    {
    　background-color: white;
    　font-family: sans-serif;
    　font-size: 10pt;
    }
    </style>

    我们可以列出有关鼠标位置的block使用者、名称、类型、block数量、以及片段的长度。为了实现这一目的，我们需要两个JavaScript函数，包含以上信息的这两个函数被调用，并传递到表单的域内：

    <script language="javascript">
    function hover(own,nam,typ,bid,len)
    {
    　document.form.owner.value = own;
    　document.form.name.value = nam;
    　document.form.type.value = typ;
    　document.form.block_id.value = bid;
    　document.form.length.value = len;
    　return true;
    }
    function leave()
    {
    　document.form.owner.value = "";
    　document.form.name.value = "";
    　document.form.type.value = "";
    　document.form.block_id.value = "";
    　document.form.length.value = "";
    　return true;
    }
    </script>
    . . .
    <form name="form">
    <table border=0>
    <tr><td>Owner:</td><td><input name="owner" /></td></tr>
    <tr><td>Name:</td><td><input name="name" /></td></tr>
    <tr><td>Type:</td><td><input name="type" /></td></tr>
    <tr><td>Block#:</td><td><input name="block_id" /></td></tr>
    <tr><td>Length:</td><td><input name="length" /></td></tr>
    </table>
    </form>

    对于每一片段，我们需要建立一个block的<a>标签。最后，建立一个显示不同颜色含义的图表：

    <table border=0>
    <tr><thcolspan="2">Legend</th></tr>
    <tr><td><a name="free" class="free">. </a></td>
    <td>Free Space</td></tr>
    <tr><td><a name="cache" class="cache">. </a></td>
    <td>Cache</td></tr>
    <tr><td><a name="cluster" class="cluster">. </a></td>
    <td>Cluster</td></tr>
    <tr><td><a name="index" class="index">. </a></td>
    <td>Index</td></tr>
    <tr><td><a name="lobindex" class="lobindex">. </a></td>
    <td>LobIndex</td></tr>
    <tr><td><a name="lobsegment" class="lobsegment">. </a></td>
    <td>LobSegment</td></tr>
    <tr><td><a name="rollback" class="rollback">. </a></td>
    <td>Rollback</td></tr>
    <tr><td><a name="temporary" class="temporary">. </a></td>
    <td>Temporary</td></tr>
    <tr><td><a name="table" class="table">. </a></td>
    <td>Table</td></tr>
    <tr><td><a name="other" class="other">. </a></td>
    <td>Other</td></tr>
    </table>