html-table

HTML Table - Align Text and line

I am trying to align the text in my table. I would like it to look like this screenshot:enter image description here

I would like to have the first line with "Arcui quam id partinuculam" to match my screenshot where it goes right above the line starting with "Arcu".

Currently I have:

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head><meta charset="UTF-8">


</head>
<body><!--Make the whole page a table so the <thead> acts as the header-->
       
             
        
<table>
  <tbody>

  <tr>
      <td colspan="5"><span>Arcui quam id partinuculam </span></td>
     <td style="border-bottom:1px black solid;width:400px;height:40px">&nbsp;</td>
  </tr>

  <tr>
      <td style="height:40px;vertical-align: bottom;text-align:left;">Arcu</td>
      <td style="border-bottom:1px black solid;width:400px;height:40px">&nbsp;</td>
      <td colspan="4" style="height:40px;vertical-align: bottom;text-align:left;" >, partium ut proponit conditione ad molunt donec</td>
   
  </tr>
  <tr>
      <td style="height:40px;vertical-align: bottom;text-align:left;">Nihil</td>
      <td style="border-bottom:1px black solid;width:400px;height:40px">&nbsp;</td>
      <td style="height:40px;vertical-align: bottom;text-align:left;">Elucescunt</td>
      <td style="border-bottom:1px black solid;width:400px;height:40px">&nbsp;</td>
  </tr>
  <tr>
      <td style="height:40px;vertical-align: bottom;text-align:left;">Opiniones </td>
      <td style="border-bottom:1px black solid;width:400px;height:40px">&nbsp;</td>
  </tr>
  <tr>
      <td style="height:40px;vertical-align: bottom;text-align:left;">Erat </td>
      <td style="border-bottom:1px black solid;width:400px;height:40px">&nbsp;</td>
  </tr>

</tbody>
</table>

  

</body>
</html>

It was suggested to me that to make it look the way I want would depend on the width of the table and the width of the columns/cells. It looks like the table is too narrow to fit the full sentence and line.

Would anyone know what I need to change in HTML to make this work?

Solution

  • What you have isn't a table. So don't use a <table>.

    What you have is five lines of text, with some stylistically underlined spaces. For example:

    <p style="line-height:2rem;">
  Arcui quam id partinuculam <span style="display:inline-block;border-bottom:1px solid #000;width:14rem;"></span><br/>
  Arcu <span style="display:inline-block;border-bottom:1px solid #000;width:12rem;"></span>, partinum ut proponit conditione ad molunt donec<br/>
  Nihil <span style="display:inline-block;border-bottom:1px solid #000;width:11rem;"></span> Elucescunt <span style="display:inline-block;border-bottom:1px solid #000;width:17rem;"></span><br/>
  Opiniones <span style="display:inline-block;border-bottom:1px solid #000;width:11rem;"></span><br/>
  Erat <span style="display:inline-block;border-bottom:1px solid #000;width:8rem;"></span><br/>
</p>

    (Note to readers: I'm continuing to use inline styles as the OP did mainly due to this comment in which it's indicated that the result will be in an email, not on a website.)

    Adjust widths as needed for the blank lines, adjust the line height as needed. I'm using rem units, you can use any units you prefer. Overall the point is that what you have is simply five lines of text. There's no need to over-engineer this.