JSF の HTML (UIComponent) 系タグにはテーブルを作成するタグが２種類用意されています。
これらのタグと固有機能系タグを組み合わせることでテーブルを使用した画面を作成可能です。

6. テーブル関連タグ

(*) HTML 系タグの詳細はこちらをご参照ください。
(*) JSF 固有機能系タグの詳細はこちらをご参照ください。

6.1. h:panelGrid

HTML の <table> タグに対応しています。

sample6_1.xhtml

<h:body>
    <h:panelGrid columns="3" border="1">
        <h:outputText value="コード"/>
        <h:outputText value="分類"/>
        <h:outputText value="備考"/>
        <h:outputText value="book_001"/>
        <h:outputText value="小説"/>
        <h:outputText value="散文で作成された虚構の物語として定義される。"/>
        <h:outputText value="book_002"/>
        <h:outputText value="技術本"/>
        <h:outputText value="各分野において目的を達成するために用いられる手段・手法をまとめた書物。"/>
        <h:outputText value="book_003"/>
        <h:outputText value="雑誌"/>
        <h:outputText value="逐次刊行物であり定期刊行物である出版物の一種。"/>
    </h:panelGrid>
</h:body>

画面

HTML

<body>
<table border="1">
    <tbody>
    <tr>
        <td>コード</td>
        <td>分類</td>
        <td>備考</td>
    </tr>
    <tr>
        <td>book_001</td>
        <td>小説</td>
        <td>散文で作成された虚構の物語として定義される。</td>
    </tr>
    <tr>
        <td>book_002</td>
        <td>技術本</td>
        <td>各分野において目的を達成するために用いられる手段・手法をまとめた書物。</td>
    </tr>
    <tr>
        <td>book_003</td>
        <td>雑誌</td>
        <td>逐次刊行物であり定期刊行物である出版物の一種。</td>
    </tr>
    </tbody>
</table>
</body>

(*) 一部改行を追加しています。

h:panelGrid は <table><tbody> ... </tbody></table> に変換されます。
上記例では columns 属性と border 属性を指定していますが、いずれも必須ではありません。columns 属性を指定しなかった場合は列が１列に、border 属性を指定しなかった場合は枠線がなくなります。

<tr></tr> タグと <td></td> タグは <h:panelGrid> と </h:panelGrid> の間で宣言したタグの内容を元に自動的に生成されます。
今回は 12個の <h:outputText/> を宣言しており、列数 (columns 属性) に「3」を指定していますので
４行×３列のテーブルとして出力されています。

他にも数多くの属性を指定可能ですが、ここでは一部を紹介するにとどめます。
(*) h:panelGrid に指定可能な属性の詳細はこちらをご参照ください。

HTML の <table>タグと同様、cellpadding 属性や cellspacing 属性を指定可能です。

ex.) <h:panelGrid ～略～ cellpadding="0" cellspacing="0"/> での HTML と画面

<table border="1" cellpadding="0" cellspacing="0">
    ～ 略 ～
</table>

また、行毎、列毎に CSS を指定可能です。

rowClasses 属性で行毎のクラスを、columnClasses属性で列毎のクラスを指定します。いずれも「, (カンマ)」で区切ることで必要数指定します。

ex.) <h:panelGrid ～略～ rowClasses="title,data,data,data" columnClasses="center,center"> での HTML/CSS と画面

<table border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr class="title">
    <td class="center">コード</td>
    <td class="center">分類</td>
    <td>備考</td>
</tr>
<tr class="data">
    <td class="center">book_001</td>
    <td class="center">小説</td>
    <td>散文で作成された虚構の物語として定義される。</td>
</tr>
<tr class="data">
    <td class="center">book_002</td>
    <td class="center">技術本</td>
    <td>各分野において目的を達成するために用いられる手段・手法をまとめた書物。</td>
</tr>
<tr class="data">
    <td class="center">book_003</td>
    <td class="center">雑誌</td>
    <td>逐次刊行物であり定期刊行物である出版物の一種。</td>
</tr>
</tbody>
</table>
<style type="text/css">
.title {
    font-weight: bold;

    text-align: center;
}
.center {
    text-align: center;
}
.data {
}
</style>

[ END ]

JSF2.0 タグ一覧 (h:panelGrid) 編的更多相关文章

  1. jsf2.0视频

    jsf2.0 入门视频 教程   需要的看下.初次录视频.还有很多需要完善. JSF交流QQ群84376982 JSF入门视频下载地址  http://pan.baidu.com/s/1jG3y4T4 ...

  2. tomcat 6 不支持jsf2.2，仅支持jsf2.0及以下版本

    tomcat 6 不支持jsf2.2,仅支持jsf2.0及以下版本 安装tomcat8即可.

  3. /usr/include/glib-2.0/glib/gtypes.h:34:24: fatal error: glibconfig.h: No such file or directory

    cc -DDEBUG -mtune=core2 -O2 \ -onvideo nvideo.c \ -I/usr/include/atk-1.0 \ -I/usr/include/cairo \ -I ...

  4. jsf2.0 tomcat 修改页面后无法立马看到页面修改效果

    转载于  http://stackoverflow.com/questions/12203657/jsf2-myfaces-xhtml-modifications-do-not-affect-unti ...

  5. 第二次作业#include <stdio.h> int main() { int a,b,c,d,e; printf("请输入一个不多于五位的整数：\n"); scanf("%d",&a); if(a>=100000||a<=0) { printf("输入格式错误！ \n"); } else { if(

    1 判断成绩等级 给定一百分制成绩,要求输出成绩的等级.90以上为A,80-89为B,70-79为C,60-69为D,60分以下为E,输入大于100或小于0时输出"输入数据错误". ...

  6. termios.h(FreeBSD 12.0)

    一.文件位置 /usr/include/termios.h 二.文件内容 /*- * SPDX-License-Identifier: BSD-3-Clause * * Copyright (c) 1 ...

  7. apiCloud中aui获取不到高度，pos.h为0，offsetHeight为0问题

    apiCloud中aui获取不到高度,pos.h为0,offsetHeight为0问题 原HTML <div class="row aui-text-center"> ...

  8. primefaces4.0基本教程以及增删改查

    最近试着用了用primefaces4.0,准备写一个基本的增删改查以及分页程序,但在写的过程中发现了很多问题,本想通过百度.谷歌解决,但无奈中文资料非常少,笔者在坑中不停的打滚,终于完成了一个有着基本 ...

  9. JSF 2 panelGrid example

    In JSF , "h:panelGrid" tag is used to generate HTML table tags to place JSF components in ...

随机推荐

  1. Android支付接入（三）：电信爱游戏支付

    原地址:http://blog.csdn.net/simdanfeg/article/details/9011977 注意事项: 1.电信要求必须先启动电信的闪屏界面 2.非网络游戏不允许有Inter ...

  2. 学习笔记：shared_ptr陷阱

    条款1:不要把一个原生指针给多个shared_ptr管理 int* ptr = new int; shared_ptr<int> p1(ptr); shared_ptr<int> ...

  3. QT中16进制字符串转汉字

    最经在研究AT指令接受短信,短信是unicode编码,接受后需要根据系统的编码方案进行相关的转码比如接受到了一串字符4F60597D,它是“你好”的unicode编码,一个unicode编码占两个字节 ...

  4. 忽然发现，if语句没有相应的continue功能

    就是剩下部分语句不用执行了,但是又不退出当前函数,只退出当前if块.虽说else可以解决问题,但是这样还是会重复写代码,假如continue语句后面的内容是相同的话.当然可以通过再次加一个if语句解决 ...

  5. Cinema 4D R16安装教程

    CINEMA 4D_百度百科 http://baike.baidu.com/view/49453.htm?fr=aladdin 转自百度贴吧 [教程]Cinema 4D R16新功能介绍及安装教程_c ...

  6. profile工具

    gprof callgrind vtune(待使用) ----time命令(待学习) ps -u <username> -H -opid,cmd strace

  7. Android安全问题 抢先接收广播 - 内因篇之广播发送流程

    导读:本文说明系统发送广播的部分流程,如何利用Intent查找到对应接收器.我们依然只关注接收器的排序问题 这篇文章主要是针对我前两篇文章 android安全问题(四) 抢先开机启动 - 结果篇 an ...

  8. 远程唤醒 N54L

    远程唤醒 N54L 我的N54L装了一块买时带的WD500G黑盘,又装了一个WD2T绿盘,存些电影歌曲什么的,当NAS用,装的WIN7系统,长时间不使用就自动关机了,每次都得按一下电源开关键,于是就研 ...

  9. 函数重载二义性：error C2668: 'pow' : ambiguous call to overloaded function

    2013-07-08 14:42:45 当使用的函数时重载函数时,若编译器不能判断出是哪个函数,就会出现二义性,并给出报错信息. 问题描述: 在.cpp代码中用到pow函数,如下: long int ...

  10. 比nerdtree更好的文件浏览器：vimfiler

    通过:VimFilerExplorer来打开一个文件浏览器 h:收起 t:展开 -:close 回车:进入或展开 空格:收起