colspan 要素を使用して、必要な方法で正しくフォーマットされた HTML テーブルがあります。ただし、複数の列を占める要素が、列の境界 (スパンされた要素内) に何らかの境界線または分割を持つようにすることも必要です。これの目的は、スパンされた要素が占める列の数をユーザーが簡単に確認できるようにすることです。
たとえば、テーブル内の要素が 1 つの行と 4 つの列を占める場合、要素内に 3 つの区分が存在する可能性があります。ありがとう。
<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.....
私は今日多くのことを学んでいます jsfiddle は素晴らしいです! テーブルが現在どのようにレンダリングされているかを示すjsfiddleがあります（提案アレックスに感謝します）。たとえば、テーブル内に fsm_idac_input_code_i が表示されている場合、要素が占める列 (GPIO) の数は明らかではありません。要素内にまだいくつかの列の境界線がある場合、ユーザーは、隣接するセルの色の変化を見たり、テーブル ヘッダーを参照したりしなくても、これをはっきりと見ることができます。