質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

2回答

1970閲覧

tableを画面中央に表示したい

nagomi72

総合スコア51

JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/09/21 06:54

JSPを用いてカレンダーを表示しているのですが、このカレンダーを画面中央(webページの中央)に表示させたいです。
現状、左右方向に対しては中央に表示できているのですが、上下では下方向が大きく余っている状態です。

<table>をdivで囲み、styleの部分で以下のようにした場合も、同様に下方向が余りました。 ``` div {  text-align: center }

table {
margin-left: auto;
margin-right: auto
}

tableに対してどのような処理をかけばいいのか、ご助言の程よろしくお願いいたします。 以下、ソースコードです。

<%@page import="java.util.Calendar"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="model.*"%>

<html> <head> <meta charset=UTF-8"> <title>カレンダーの表示</title> <style> table th { padding: 30px 70px; }

table td {
padding-bottom: 50px;
}
</style>

</head> <body>
<% Month month = new Month(); User user = (User) session.getAttribute("LOGINUSER"); //パラメータ確認 String year_parameter = request.getParameter("YEAR"); String month_parameter = request.getParameter("MONTH"); String id_parameter = request.getParameter("ID"); //値がない、不正な場合-999をセット int year_now = month.yearParameterCheck(year_parameter); int month_now = month.monthParameterCheck(month_parameter); int id_now = month.idParameterCheck(id_parameter); //セッションにuser情報がないか、idが不正な値ならログインページへ if (user == null || id_now == -999) { RequestDispatcher dispatcher = request.getRequestDispatcher("/index.jsp"); dispatcher.forward(request, response); } //ログインしているか確認 user.login_status = user.loginUser(id_now, user); if (user.login_status == false) { RequestDispatcher dispatcher = request.getRequestDispatcher("/index.jsp"); dispatcher.forward(request, response); } //不正な値なら現在の年、月をセット if (year_now == -999 || month_now == -999) { year_now = month.cal.get(Calendar.YEAR); month_now = month.cal.get(Calendar.MONTH) + 1; } //12月の次は1月かつ次年度 if (month_now > 12) { month_now = 1; year_now++; } //逆もまた然り if (month_now < 1) { month_now = 12; year_now--; } int date_now = month.cal.get(Calendar.DATE); //monthインスタンスになんとなく現在の日時をセット month.cal.set(Calendar.YEAR, year_now); month.cal.set(Calendar.MONTH, month_now - 1); month.cal.set(Calendar.DATE, 1); %> <a href="/CalendarJsp/schedule/calendar.jsp?ID=<%=id_now%>&YEAR=<%=year_now%>&MONTH=<%=month_now + 1%>">翌月</a>&nbsp;<%=year_now%>年<%=month_now%>月&nbsp; <a href="/CalendarJsp/schedule/calendar.jsp?ID=<%=id_now%>&YEAR=<%=year_now%>&MONTH=<%=month_now - 1%>">前月</a> <a href="/CalendarJsp/Logout">ログアウト</a> <table border="1" align="center"> <tr> <th>日</th> <th>月</th> <th>火</th> <th>水</th> <th>木</th> <th>金</th> <th>土</th> </tr> <!-- その月の最終日 --> <% int max_day = month.cal.getActualMaximum(Calendar.DAY_OF_MONTH); %> <!--1日の曜日 --> <% int start_index = month.cal.get(Calendar.DAY_OF_WEEK); %> <tr> <!-- 1週目の1日までを空白で埋める --> <% for (int i = 1; i < start_index; i++) { %> <td>&nbsp;</td> <% } //当月の最終日まで日付けを入れていく for (int i = 1; i <= max_day; i++) { %> <td align="left"><a href="/CalendarJsp/ScheduleToday?YEAR=<%=year_now%>&MONTH=<%=month_now%>&DAY=<%=i%>&ID=<%=id_now%>"><%=i%></a></td> <% month.cal.set(Calendar.DATE, i); %> <!-- 土曜日なら次の列へ --> <% if (Calendar.SATURDAY == month.cal.get(Calendar.DAY_OF_WEEK)) { %> </tr> <% } %> <% } %> <!-- 当月の最終日が土曜日じゃない時、土曜日まで余白を埋める --> <% if (month.cal.get(month.cal.DAY_OF_WEEK) < 7) { %> <td> <% for (int count = month.cal.get(month.cal.DAY_OF_WEEK); count < 6; count++) { %> <td>&nbsp;</td> <% } %> </td> <% } %> </table> </form> </ body></ html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

flex を使えばよいのでは。

【CSSで要素を上下や左右から中央寄せする7つの方法 | 株式会社グランフェアズ】
https://www.granfairs.com/blog/staff/centering-by-css

【CSSで上下左右に中央寄せする方法、全部まとめ | WWWクリエイターズ】
http://www-creators.com/archives/391

投稿2018/09/21 07:26

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nagomi72

2018/09/21 08:30

全てためしてみましたが 思ったとおりの振る舞いにはいたりませんでした。 urlのご連携ありがとうございました
guest

0

bodyの高さが足りないのでは?

投稿2018/09/21 06:56

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nagomi72

2018/09/21 07:07 編集

認識があっているかは分かりかねますが、 style内に html { height: 100%; } body { height: 100%; } を追加したところ変化がありませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問