border divisions inside colspan html table element - html

Question

I have a HTML table correctly formatted the way I want it using the colspan element. What I also want however is for the elements that occupy multiple columns to have some kind of border or division at the column boundaries (within the spanned element). The purpose for this is to make it easy for the user to see how many columns a spanned element occupies.
For example if an element in a table occupies one row and 4 columns there could be three divisions within the element.
Thanks.
<div id="debug_con">
<h2>Debug Modes</h2>
<table class="debug">
<tr>
<th>Group Name</th>
<th>Width</th>
<th>Type</th>
<th>Group Address (dec)</th>
<th>Group Address (in HEX)</th>
<th>GPIO7</th>
<th>GPIO6</th>
<th>GPIO5</th>
<th>GPIO4</th>
<th>GPIO3</th>
<th>GPIO2</th>
<th>GPIO1</th>
<th>GPIO0</th>
</tr>
<tr class="W">
<td>debug_1</td>
<td>8</td>
<td>output</td>
<td>0</td>
<td>0x0</td>
<td class="col1" colspan="8">demod_out</td>
</tr>
<tr class="W">
<td>debug_2</td>
<td>8</td>
<td>output</td>
<td>1</td>
<td>0x1</td>
<td class="col1" colspan="8">afc_out</td>
</tr>
<tr class="R">
<td>debug_combo</td>
<td>8</td>
<td>input</td>
<td>2</td>
<td>0x2</td>
<td class="col1" colspan="4">this_upper</td>
<td class="col2" colspan="4">this_lower</td>
</tr>
<tr class="R">
<td>n_word</td>
<td>8</td>
<td>input</td>
<td>3</td>
<td>0x3</td>
<td class="col1" colspan="8">n_word</td>
</tr>
<tr class="W">
<td>write_combo</td>
<td>8</td>
<td>output</td>
<td>5</td>
<td>0x5</td>
<td class="unallocated" colspan="5">unallocated</td>
<td class="col1" colspan="1">Bit_2</td>
<td class="col2" colspan="1">Bit_1</td>
<td class="col1" colspan="1">Bit_0</td>
</tr>
<tr class="W">
<td>spi_debug</td>
<td>8</td>
<td>output</td>
<td>6</td>
<td>0x6</td>
<td class="unallocated" colspan="6">unallocated</td>
<td class="col1" colspan="1">spi_error</td>
<td class="col2" colspan="1">spi_flag</td>
</tr>
<tr class="W">
<td>OCL_GRP1</td>
<td>8</td>
<td>output</td>
<td>8</td>
<td>0x8</td>
<td class="unallocated" colspan="6">unallocated</td>
<td class="col1" colspan="1">ocl_dig_static_cal_meas_output_q</td>
<td class="col2" colspan="1">ocl_dig_static_cal_meas_output_i</td>
</tr>
<tr class="W">
<td>OCL_GRP2</td>
<td>8</td>
<td>output</td>
<td>9</td>
<td>0x9</td>
<td class="unallocated" colspan="1">unallocated</td>
<td class="col1" colspan="6">dig_ocl_controller_output_mag_i</td>
<td class="col2" colspan="1">dig_ocl_controller_output_sign_i</td>
</tr>
<tr class="W">
<td>OCL_GRP3</td>
<td>8</td>
<td>output</td>
<td>10</td>
<td>0xa</td>
<td class="unallocated" colspan="1">unallocated</td>
<td class="col1" colspan="6">dig_ocl_controller_output_mag_q</td>
<td class="col2" colspan="1">dig_ocl_controller_output_sign_q</td>
</tr>
<tr class="W">
<td>OCL_GRP4</td>
<td>8</td>
<td>output</td>
<td>11</td>
<td>0xb</td>
<td class="col1" colspan="3">oscl_sar_core_state_q</td>
<td class="col2" colspan="3">oscl_sar_core_state_i</td>
<td class="col1" colspan="1">ocl_static_cal_pga_calibration_ready_q</td>
<td class="col2" colspan="1">ocl_static_cal_pga_calibration_ready_i</td>
</tr>
<tr class="W">
<td>OCL_GRP5</td>
<td>8</td>
<td>output</td>
<td>12</td>
<td>0xc</td>
<td class="unallocated" colspan="2">unallocated</td>
<td class="col1" colspan="6">fsm_idac_input_code_i</td>
</tr>
<tr class="W">
<td>OCL_GRP6</td>
<td>8</td>
<td>output</td>
<td>13</td>
<td>0xd</td>
<td class="unallocated" colspan="2">unallocated</td>
<td class="col1" colspan="6">fsm_idac_input_code_q</td>
</tr>
.....etc.....
I am learning alot today jsfiddle is great! Ok I have a jsfiddle (thanks for the suggestion Alex) which shows how the table is currently being rendered. If you can see fsm_idac_input_code_i within the table for example, it is not obvious how many columns (GPIOs) the element occupies. If there were still some column borders within the element then the user could clearly see this without having to look at the color changes of adjacent cells or having to refer to the table header.

Answer 1

Very quick example - just to give an idea of what I meant.
Something like this, then you can style your divs as you wish - not sure is that what you need tho
<td class="col1" colspan="1">
<div>
spi_error
</div>
<div>
spi_error2
</div>
</td>

Answer 2

You can accomplish this without changing your existing layout.
This gives a red border to all cells that have a colspan greater than 1:
td[colspan] {
border: 2px solid red;
}
td, td[colspan="1"] {
border: 1px solid gray;
}
Fiddle 1
You could even show the colspan value when hovering over a cell:
td::before {
content: "1:";
position: absolute;
display: none;
left: 0;
top: 0em;
padding: 0.2em;
color: red;
}
td[colspan="2"]::before {content: "2:";}
td[colspan="3"]::before {content: "3:";}
td[colspan="4"]::before {content: "4:";}
td[colspan="5"]::before {content: "5:";}
td[colspan="6"]::before {content: "6:";}
td[colspan="7"]::before {content: "7:";}
td[colspan="8"]::before {content: "8:";}
td:hover {
padding-left: 1.5em;
}
td:hover::before {
display: block;
}
Fiddle 2