Как нарисовать пользовательскую таблицу, как показано ниже в asp.net?

Question

Может кто-нибудь предложить мне, как создать таблицу, как показано ниже?

EDIT

Я код, как below.How я могу использовать colspan здесь для второго ряда.? и в чем разница между моим кодом и кодом, который предлагается ниже в ответ.

<asp:Table ID="Table2" runat="Server" CellPadding="2" CellSpacing="1" 
       BorderColor="Black" GridLines="Both" BorderStyle="Solid" Width="100%"> 
       <asp:TableHeaderRow 
        runat="server" 
        ForeColor="Black" 
        BackColor="#DCDCDC" 
        Font-Bold="false" 
        align="center" 
        BorderColor="Black"> 
        <asp:TableHeaderCell ID="TableCell20" runat="Server" align="center">Serial No</asp:TableHeaderCell> 
        <asp:TableHeaderCell ID="TableCell21" runat="Server" align="center">Fee Details</asp:TableHeaderCell> 
        <asp:TableHeaderCell ID="TableCell22" runat="Server" align="center">Amount</asp:TableHeaderCell> 
       </asp:TableHeaderRow> 

       <asp:TableRow ID="TableRow7" 
        runat="Server" 
        BackColor="White" 
        Font-Bold="false" 
        Font-Size="Small"> 
        <asp:TableCell ID="TableCell13" runat="Server" align="center"> 
         1 
        </asp:TableCell> 

        <asp:TableCell ID="TableCell14" runat="Server" align="center"> 
         <asp:Label ID="TypeText" runat="server" Text=""></asp:Label> 
        </asp:TableCell> 

        <asp:TableCell ID="TableCell16" runat="Server" align="center"> 
         <asp:Label ID="FeeText" runat="server" Text=""></asp:Label> 
        </asp:TableCell> 

       </asp:TableRow> 

       <asp:TableRow ID="TableRow6" 
        runat="Server" 
        BackColor="White" 
        Font-Bold="false" 
        Font-Size="Small"> 


        <asp:TableCell ID="TableCell12" runat="Server" align="center"> 
         Total Amount 
        </asp:TableCell> 

        <asp:TableCell ID="TableCell15" runat="Server" align="center"> 
         <asp:Label ID="TotalAmountText" runat="server" Text=""></asp:Label> 
        </asp:TableCell> 

       </asp:TableRow> 

Answer 1

В таблице вы запрашиваете может быть достигнуто следующим образом:

.bordered-table { 
 
    width: 300px; 
 
    height: 78px; 
 
    border: 2px solid black; 
 
    border-collapse: collapse; 
 
} 
 
.bordered-table tr td { 
 
    border-right: 2px solid black; 
 
    border-bottom: 2px solid black; 
 
}

<table class="bordered-table"> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     text 
 
     </td> 
 
     <td> 
 
     text 
 
     </td> 
 
     <td> 
 
     text 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="2" style="text-align: center;"> 
 
     text 
 
     </td> 
 
     <td> 
 
     text 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     text 
 
     </td> 
 
     <td colspan="2" style="text-align: center;"> 
 
     text 
 
     </td> 
 
     <tr> 
 
    </tbody> 
 
</table>

Вот Link, который может детализировать атрибут td colspan для вас.