How to make an html element with continuous lines-CodePudding

I'm trying to display an address then an email contact in a continuous way. This was my attempt I'm new to html. Right now its appears like this. How can I eliminate the gap between the address and the contact email?

address address  address contact
line    line     line    @
1       2        3       gmail.com

<body>
    <div id="html_content">
        <table id="header-address">
            <tbody>
                <tr>
                    {{#address}}
                        <td>{{ addressLine }}</td>
                    {{/address}}
                    <td>
                        <span >Contact</span> 
                    </td>
                    <td>
                        <img  src="{{ logoUrl }}" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
<body>

CodePudding user response：

<table>
  <tr>
    <td>address line 1</td>
  </tr>
   <tr>
    <td>address line 2</td>
  </tr>
   <tr>
    <td>address line 3</td>
  </tr>
   <tr>
    <td>address line 4</td>
  </tr>
  <tr>
    <td><span>[email protected] 4</span></td>
  </tr>
 </table>

CodePudding user response：

You can do this in javascript.

const waitBeforeContinuing = ms => new Promise(res => setTimeout(res, ms));

i=0;
i2=0;
i3=0;

function tableBody() {
  i =1;
  i2 =1;
  i3 =1;

  // YOU CAN STORE INFORMATION IN AN ARRAY IF YOU NEED TO, THEN USE array[$i-1];
  
  tableInfo = `${i}${i}<td>${i2}</td>{{/address}}<td><span >Contact</span></td><td><img  src="${i3}" /></td>`;
                
  const tr = document.createElement("tr");
  
  tr.innerHTML = tableInfo;
  
  document.getElementById('tablebody').appendChild(tr);
  
  table2(); // to prevent errors
}

async function table2() {
  await waitBeforeContinuing(300); // to prevent errors
  tableBody();
}


tableBody();

/*
<tr>
                    {{#address}}
                        <td>{{ addressLine }}</td>
                    {{/address}}
                    <td>
                        <span >Contact</span> 
                    </td>
                    <td>
                        <img  src="{{ logoUrl }}" />
                    </td>
                </tr>
*/

<table id="header-address">
            <tbody id="tablebody">
                
            </tbody>
        </table>

This code infinitely adds elements to the table. You can also use arrays to show custom elements, not just numbers.