Search code examples
htmlcssalignment

Align buttons in For Loop

This is my HTML code at the moment:

<title>Cashier/Customer Application</title>
</head>


<body>

<h1>Cashier/Customer Application</h1>

<div id="createOrderDiv">
    <input id="createOrderButton" type="button" value="New Order" onClick="showOrderOptions();"/>
</div>


    <div id="createOrderTable" style="display:none;">
        <form action='Controller' method='POST'>            
            <table>
                <tr>
                    <td>Coffee Type:</td>
                    <td>
                        <select name="orderType" id="coffeeType">
                            <option value="espresso">Espresso</option>
                            <option value="macchiato">Macchiato</option>    
                            <option value="cappuccino">Cappuccino</option>          
                        </select>
                    </td>           
                </tr>
                <tr>
                    <td>Addition Type:</td>
                    <td>
                        <select name="orderAddition" id="additionType">
                            <option value="skimMilk">Skim Milk</option>
                            <option value="extraShot">Extra Shot</option>   
                        </select>
                    </td>           
                </tr>
                <tr>
                    <td><input name="submitOrderBtn" type="submit" value="Submit Order" onClick="changeGetOrderID(this.id)"/></td>
                </tr>
            </table>
        </form> 
    </div>

<h2>Open Orders</h2>
<div id="openOrderTable">
    <form action='Controller' method='POST'>
        <table>
            <c:forEach var="item" items="${openOrders}">    

                 <tr style="text-align:center;">                             
                    <td><input name="button${item.id}" id="order:${item.id}" type="submit" value="- Coffee Order ${item.id}" onClick="changeGetOrderID(this.id)"/></td>
                </tr>
                 <tr style="text-align:center;">                             
                    <td><input name="button${item.id}" id="cancel:${item.id}" type="submit" value="Cancel" onClick="changeGetOrderID(this.id)"/></td>
                </tr>
                <tr style="text-align:center;">                          
                    <td><input name="button${item.id}" id="update:${item.id}" type="submit" value="Update" onClick="changeGetOrderID(this.id)"/></td>
                </tr>
                <tr style="text-align:center;">                          
                    <td>
                        <select name="updateType${item.id}">
                            <option value="cappuccino">Cappuccino</option>
                            <option value="espresso">Espresso</option>
                            <option value="macchiato">Macchiato</option>
                        </select>
                    </td>
                    <td>
                        <select name="updateAddition${item.id}">
                            <option value="">None</option>
                            <option value="skimMilk">Skim Milk</option>
                            <option value="extraShot">Extra Shot</option>
                        </select>                   
                    </td>
                <tr style="text-align:center;">                          
                <tr style="text-align:center;">                          
                    <td><input name="button${item.id}" id="pay:${item.id}" type="submit" value="Pay" onClick="changeGetOrderID(this.id)"/></td>
                </tr>
                <tr style="text-align:center;">                          
                    <td>
                        <select name="paymentType${item.id}">
                            <option value="cash">Cash</option>
                            <option value="card">Card</option>
                        </select>
                    </td>
                    <td>
                        Name: <input type="text" name="name${item.id}"><br>
                    </td>
                    <td>
                        Card No: <input type="text" name="cardNo${item.id}"><br>
                    </td>
                    <td>
                        Expires: <input type="text" name="expires${item.id}"><br>
                    </td>
                </tr>
                <tr style="text-align:center;">                          
                    <td><input name="button${item.id}" id="option:${item.id}" type="submit" value="Option" onClick="changeGetOrderID(this.id)"/></td>               
                </tr>               
            </c:forEach>                
         </table>
         <input type="hidden" name="orderID" id="orderID" value=""> 

        <h2>Cancelled Orders</h2>
            <table>
            <c:forEach var="item" items="${cancelledOrders}">
                <tr style="text-align:center;">                          
                    <td><input name="button${item.id}" id="order:${item.id}" type="submit" value="- Coffee Order ${item.id}" onClick="changeGetOrderID(this.id)"/></td>
                </tr>
            </c:forEach>                
         </table>    
    </form> 
</div>

<h2>Result</h2>

</body>
</html>

This is my CSS:

@CHARSET "ISO-8859-1";

h1,h2 {
    text-align:center;
}

#createOrderDiv {
    text-align:center;  
}

#createOrderTable{
    text-align:center;  
}

table {
    width: 700px;
    margin-left: auto;
    margin-right: auto;
}


body{

    font-family: Verdana, Arial, sans-serif;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid;
    padding: 20px;    
}

This is producing the following:

enter image description here

I am trying to get all the buttons and drop down boxes aligned in the center like how Cancelled Orders and the button below it are aligned.

Would anyone have any tips to go about achieving this?

Thanks for your help.

Solution

  • Simply add the CSS below to your stylesheet:

    tr td {
     display: block;
}


    h1,
h2 {
  text-align: center;
}
#createOrderDiv {
  text-align: center;
}
#createOrderTable {
  text-align: center;
}
table {
  width: 700px;
  margin-left: auto;
  margin-right: auto;
}
body {
  font-family: Verdana, Arial, sans-serif;
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid;
  padding: 20px;
}
tr td {
  display: block;
}
    <h1>Cashier/Customer Application</h1>

<div id="createOrderDiv">
  <input id="createOrderButton" type="button" value="New Order" onClick="showOrderOptions();" />
</div>


<div id="createOrderTable" style="display:none;">
  <form action='Controller' method='POST'>
    <table>
      <tr>
        <td>Coffee Type:</td>
        <td>
          <select name="orderType" id="coffeeType">
            <option value="espresso">Espresso</option>
            <option value="macchiato">Macchiato</option>
            <option value="cappuccino">Cappuccino</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>Addition Type:</td>
        <td>
          <select name="orderAddition" id="additionType">
            <option value="skimMilk">Skim Milk</option>
            <option value="extraShot">Extra Shot</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>
          <input name="submitOrderBtn" type="submit" value="Submit Order" onClick="changeGetOrderID(this.id)" />
        </td>
      </tr>
    </table>
  </form>
</div>

<h2>Open Orders</h2>
<div id="openOrderTable">
  <form action='Controller' method='POST'>
    <table>
      <c:forEach var="item" items="${openOrders}">

        <tr style="text-align:center;">
          <td>
            <input name="button${item.id}" id="order:${item.id}" type="submit" value="- Coffee Order ${item.id}" onClick="changeGetOrderID(this.id)" />
          </td>
        </tr>
        <tr style="text-align:center;">
          <td>
            <input name="button${item.id}" id="cancel:${item.id}" type="submit" value="Cancel" onClick="changeGetOrderID(this.id)" />
          </td>
        </tr>
        <tr style="text-align:center;">
          <td>
            <input name="button${item.id}" id="update:${item.id}" type="submit" value="Update" onClick="changeGetOrderID(this.id)" />
          </td>
        </tr>
        <tr style="text-align:center;">
          <td>
            <select name="updateType${item.id}">
              <option value="cappuccino">Cappuccino</option>
              <option value="espresso">Espresso</option>
              <option value="macchiato">Macchiato</option>
            </select>
          </td>
          <td>
            <select name="updateAddition${item.id}">
              <option value="">None</option>
              <option value="skimMilk">Skim Milk</option>
              <option value="extraShot">Extra Shot</option>
            </select>
          </td>
          <tr style="text-align:center;">
            <tr style="text-align:center;">
              <td>
                <input name="button${item.id}" id="pay:${item.id}" type="submit" value="Pay" onClick="changeGetOrderID(this.id)" />
              </td>
            </tr>
            <tr style="text-align:center;">
              <td>
                <select name="paymentType${item.id}">
                  <option value="cash">Cash</option>
                  <option value="card">Card</option>
                </select>
              </td>
              <td>
                Name:
                <input type="text" name="name${item.id}">
                <br>
              </td>
              <td>
                Card No:
                <input type="text" name="cardNo${item.id}">
                <br>
              </td>
              <td>
                Expires:
                <input type="text" name="expires${item.id}">
                <br>
              </td>
            </tr>
            <tr style="text-align:center;">
              <td>
                <input name="button${item.id}" id="option:${item.id}" type="submit" value="Option" onClick="changeGetOrderID(this.id)" />
              </td>
            </tr>
      </c:forEach>
    </table>
    <input type="hidden" name="orderID" id="orderID" value="">

    <h2>Cancelled Orders</h2>
    <table>
      <c:forEach var="item" items="${cancelledOrders}">
        <tr style="text-align:center;">
          <td>
            <input name="button${item.id}" id="order:${item.id}" type="submit" value="- Coffee Order ${item.id}" onClick="changeGetOrderID(this.id)" />
          </td>
        </tr>
      </c:forEach>
    </table>
  </form>
</div>