CODEWITHSUNDEEP
htmlhtml-table
Jayizzle
Jayizzle

Reputation: 532

How to align all HTML table data in a table row to be next to each other?

I am attempting to edit this code to bring the Range 1 and Code 1 texts and input fields to be all side-by-side with each other.

Setting two fields to be side by side, is OK since aligning the first one right, and the other left, would centralize both. But with four, it separates the entire row by columns, which can't align everything to what I need.

Screenshot of problem:

screenshot of problematic table rendering

Table html:

<table border="0" width="80%" align="center" colspan="2">
      <div align="right">
      <tr><td colspan="2" align="center"><H1>Create New Sliding Scale Fee Ranges</H1></td></tr>
       <tr>
        <td  align="center" CLASS="L1">ContractId:</td>
        <td><input type="text" id="ContractId" name="ContractId" value=""/></td>
    </tr>
    <tr>
        <td  align="center" CLASS="L1">Facility:</td>
         <td> <%= prodMgr.getDispenserDDLB(userId, dispenserId, "", "",  "dispenserId") %></td>
    </tr>


    <tr><td colspan="4" align="center">
        <td align="center" CLASS="L1" >1st Range:</td>
            <td>
               <input name="range1" value="" size="10"/>
            </td>


        <td align="center" CLASS="L1">Cost:</td>
        <td>
            <input name="cost1" value="" size="10"/>
        </td>
         </td>
       </tr>

Upvotes: 1

Views: 1414

Answers (2)

zer00ne
zer00ne

Reputation: 43880

  • Made it a complete table header
  • One row
  • Styled the heading into a table caption.

Snippet

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>35490934</title>
</head>

<body>
<table border="0" width="80%" align="center" colspan="2">
   
      <caption style="text-align:left"><H1 style="font-family: Arial; color: orange">Create New Sliding Scale Fee Ranges</H1></caption>
      <thead>
      <tr>
        <td  align="center" CLASS="L1">ContractId:</td>
        <td><input type="text" id="ContractId" name="ContractId" value=""/></td>

        <td  align="center" CLASS="L1">Facility:</td>
        
         <td> <input/></td>


 <td colspan="4" align="center">
        <td align="center" CLASS="L1" >1st Range:</td>
            <td>
               <input name="range1" value="" size="10"/>
            </td>


        <td align="center" CLASS="L1">Cost:</td>
        <td>
            <input name="cost1" value="" size="10"/>
        </td>
         </td>
       </tr>
       </thead>
 </table>
</body>
</html>

Upvotes: 2

Omari Victor Omosa
Omari Victor Omosa

Reputation: 2869

Use the code below 

<style>

tr{
display:inline;
float:left;

}


</style>


<H1>Create New Sliding Scale Fee Ranges</H1>
<table border="0" width="80%" align="center" colspan="2">
  <div align="right">
  <tr><td colspan="2" align="center"></td></tr>
   <tr>
    <td  align="center" CLASS="L1">ContractId:</td>
    <td><input type="text" id="ContractId" name="ContractId" value=""/>    </td>
</tr>
<tr>
    <td  align="center" CLASS="L1">Facility:</td>
     <td> <!--<%= prodMgr.getDispenserDDLB(userId, dispenserId, "", "",  "dispenserId") %>-->
     <select name="Facility"  />
       <option value="some text">some text</option>         

  </td>
</tr>


<tr><td colspan="4" align="center">
    <td align="center" CLASS="L1" >1st Range:</td>
        <td>
           <input name="range1" value="" size="10"/>
        </td>


    <td align="center" CLASS="L1">Cost:</td>
    <td>
        <input name="cost1" value="" size="10"/>
    </td>
     </td>
   </tr>
</table>

Result enter image description here

Upvotes: 1

Related Questions