Q:

HTML table display issues

My output file should be like this :
This is my html file

<P>Optional steht in den Einstellungen der Kundenauftragsbearbeitung ein Parameter zur Verfügung, der steuert, ob ein aus den eingegebenen Zahlungsbedingungen errechneter Fälligkeitstermin auf einem Wochenende oder Feiertag liegen darf. Ist dies nicht gewollt, wird der Fälligkeitstag auf den nächsten Montag(Werktag) des errechneten Termins geschoben.</P>
<table>
<tr><td><B>Zahlungsschlüssel:</B></td>
<td>Eingabe einer Kurzkennung für einen Zahlungsschlüssel.<br>

Bei Einsatz des IBM-Finanzwesen sollten die Schlüssel einheitlich <br>

verwendet werden.</td></tr>

<tr><td><B>Sprache:</B></td>
<td>Die Zahlungsbedingungen können in verschiedenen Sprachen hinterlegt werden. Dazu muss über die Kopierfunktion ein neuer Zahlschlüssel mit der betreffenden Sprache angelegt werden. Wenn es zur Sprache des Dokuments keinen Zahlschlüssel gibt wird der deutsche verwendet.</td></tr>


<tr><td><B>Bezeichnung:</B></td>
<td>Eingabe eines Kurztextes zur Beschreibung des Zahlungsschlüssels.</td></tr>


<tr><td><B>Fixtermin:</B></td>
<td>Die Markierung dieses Feldes verändert den Folgedialog.</td></tr></table>


<P>Folgeabfrage bei <B>Markierung des Feldes "Fixtermin":</B></P>
<table>
<tr><td><A NAME="1427sv9"></A><B>Rechnung vom</B><br>

<B>Rechnung bis:</B></td>
<td>Eingabe eines Tages im lfd. Monat ab dem / bis zu dessen Ausstellungstag <br>
Rechnungen zu einem fixen Termin fällig gestellt werden.</td></tr>


<tr><td><A NAME="e5z0dd"></A><B>Fälligkeit bis:</B></td>
<td>Eingabe des Tages, an dem die mit der vorstehenden Eingabe <br>

zusammengefasten Rechnungen fällig sind.</td></tr>


<tr><td><B>Fälligkeitstage:</B></td>
<td>alternativ zu einem Kalenderdatum kann auch eine kontante Anzahl von Tagen für die Fälligkeitsberechnung hinterlegt werden</td></tr>



<tr><td><B>Skonto:</B></td>
<td>Eingabe eines Prozentsatzes, der für die Skontoberechnung. Bei Fixterminen wird nur ein Skontosatz berücksichtigt.</td></tr>



<tr><td><B>Skontierfähigkeit bis:</B></td>
<td>Eingabe des Tages, bis zu dem die mit der vorstehenden Eingabe <br>
zusammengefasten Rechnungen skontierfähig sind.</td></tr>


</table>

But the output display format is not coming good. I want to use div tag instead of tables. I don't know how to use it exactly. As tables are coming in the middle of paragraphs. So kindly give me a solution?

A:

With just a little bit of css styling your table looks ok.

table {
  border-collapse: separate;
  border-spacing: 10px; /* space between cells */
}
td {
  vertical-align: top; /* text in cells on top */
}
<P>Optional steht in den Einstellungen der Kundenauftragsbearbeitung ein Parameter zur Verfügung, der steuert, ob ein aus den eingegebenen Zahlungsbedingungen errechneter Fälligkeitstermin auf einem Wochenende oder Feiertag liegen darf. Ist dies nicht gewollt, wird der Fälligkeitstag auf den nächsten Montag(Werktag) des errechneten Termins geschoben.</P>
<table>
<tr><td><B>Zahlungsschlüssel:</B></td>
<td>Eingabe einer Kurzkennung für einen Zahlungsschlüssel.<br>

Bei Einsatz des IBM-Finanzwesen sollten die Schlüssel einheitlich <br>

verwendet werden.</td></tr>

<tr><td><B>Sprache:</B></td>
<td>Die Zahlungsbedingungen können in verschiedenen Sprachen hinterlegt werden. Dazu muss über die Kopierfunktion ein neuer Zahlschlüssel mit der betreffenden Sprache angelegt werden. Wenn es zur Sprache des Dokuments keinen Zahlschlüssel gibt wird der deutsche verwendet.</td></tr>


<tr><td><B>Bezeichnung:</B></td>
<td>Eingabe eines Kurztextes zur Beschreibung des Zahlungsschlüssels.</td></tr>


<tr><td><B>Fixtermin:</B></td>
<td>Die Markierung dieses Feldes verändert den Folgedialog.</td></tr></table>


<P>Folgeabfrage bei <B>Markierung des Feldes "Fixtermin":</B></P>
<table>
<tr><td><A NAME="1427sv9"></A><B>Rechnung vom</B><br>

<B>Rechnung bis:</B></td>
<td>Eingabe eines Tages im lfd. Monat ab dem / bis zu dessen Ausstellungstag <br>
Rechnungen zu einem fixen Termin fällig gestellt werden.</td></tr>


<tr><td><A NAME="e5z0dd"></A><B>Fälligkeit bis:</B></td>
<td>Eingabe des Tages, an dem die mit der vorstehenden Eingabe <br>

zusammengefasten Rechnungen fällig sind.</td></tr>


<tr><td><B>Fälligkeitstage:</B></td>
<td>alternativ zu einem Kalenderdatum kann auch eine kontante Anzahl von Tagen für die Fälligkeitsberechnung hinterlegt werden</td></tr>



<tr><td><B>Skonto:</B></td>
<td>Eingabe eines Prozentsatzes, der für die Skontoberechnung. Bei Fixterminen wird nur ein Skontosatz berücksichtigt.</td></tr>



<tr><td><B>Skontierfähigkeit bis:</B></td>
<td>Eingabe des Tages, bis zu dem die mit der vorstehenden Eingabe <br>
zusammengefasten Rechnungen skontierfähig sind.</td></tr>


</table>

You can learn more about css for example here.

