CODEWITHSUNDEEP
cssformsjspalignment
user2268507
user2268507

Reputation:

Align Table in JSP

I currently have the following:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>   
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Hotel Occupancy</title>
</head>
<body>  

<c:forEach begin="1" end="${noHotels}" varStatus="loop">        

    <h1 align="center">${hotelLoc[loop.index - 1]}</h1>


    <form action='cartController' method='POST'> 
            <table style="width:1000px" style="text-align:center">
                <tr style="text-align:center">
                    <th>Room Type</th>
                    <th>Occupied</th>
                    <th>Available</th>                      
                </tr>

                <c:forEach var="item" items="${hotelOccupancy}">                    
                     <c:if test="${item.hotelID == loop.index}">                                
                        <tr style="text-align:center">
                          <td>${item.roomType}</td>
                          <td>${item.occupied}</td>
                          <td>${item.available}</td>      
                        </tr>
                    </c:if>
                </c:forEach>
            </table>                
    </form>

</c:forEach>

The output is as follows: table

Could someone help me align the table properly?

Upvotes: 0

Views: 5230

Answers (1)

abl
abl

Reputation: 5968

Your problem is that you have:

  • A title (h1) that takes up the full width of the body. The text of this title is center-aligned, so it appears at the center of the body.
  • A table with a fixed width that is less than the width of the body. This table is aligned at the left of the body. Therefore, the title and table are not aligned with each other. Your problem will be even more obvious in bigger screens.

A possible solution is to place both the title and table inside a div. Set the table width to 100%, then set the width of the div to whatever you want. I've put up a fiddle to illustrate this approach.

However, I wouldn't recommend setting fixed width to any of your elements unless absolutely necessary, since this will result in a more rigid layout. The layout you provided, for example, will not suit anyone with a screen resolution below 1000 px.

tr, h2 {
    text-align:center;
}

table {
    background-color: #FFFFCC;
}

h2 {
    background-color: #FFCCFF;
}

div {
    border : 1px solid lightgray;
}


<h2>Title</h2>
<table style="width:300px">
    <thead>
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>3</td>
            <td>3</td>
        </tr>
    </tbody>
</table>
<hr>
<div style="width:300px;">
    <h2>Title</h2>
    <table style="width:100%;">
        <thead>
            <tr>
                <th>A</th>
                <th>B</th>
                <th>C</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>3</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>
</div>

Upvotes: 1

Related Questions