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. [转载]jquery获取元素索引值index()方法：

    jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的 ...

  2. [Unity+Android]横版扫描二维码

    原地址:http://blog.csdn.net/dingxiaowei2013/article/details/25086835 终于解决了一个忧伤好久的问题,严重拖了项目进度,深感惭愧!一直被一系 ...

  3. Ubuntu环境下手动配置openSSH

    配置openSSH 1.手动下载压缩文件(.tar.gz) zlib-1.2.7.tar.gz openssl-1.0.1j.tar.gz openssh-6.0p1.tar.gz 2.安装zlib ...

  4. What is the innovator’s solution——什么才是创新的解决方案2

    前略:http://www.cnblogs.com/Kassadin/p/4233497.html 案例1 从书上的一个案例开始: 让我们来看看AT&T公司(美国电话电报公司)的案例吧.198 ...

  5. java main()静态方法

    java main()方法是静态的.意味着不需要new(),就在内存中存在.而且是属于类的,但是对象还是可以调用的. 若干个包含这个静态属性和方法的对象引用都可以指向这个内存区域.这个内存区域发生改变 ...

  6. jquery.dataTables插件使用例子详解

    DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格 效果图 代码 <!doctype html> & ...

  7. 跨平台的目录遍历实现方法（windows和linux已经测试）

    dirent.h是gcc下的一个头文件,在windows中是没有的.这个文件中封装了几个对目录进行操作函数: static DIR *opendir (const char *dirname);sta ...

  8. 函数可重入问题reentrant functions（函数执行过程中可以被中断，允许多个副本）

    最近经常听到这个名词,以前也听到过,不过接触更多的是“线程安全问题”,而且本人也一直理解的是两个名字的含义是一样的.今天仔细总结一下这个名词相关的概念. 引用博文:可重入函数和不可重入函数 (http ...

  9. ArcGIS学习记录—ArcGIS ArcMap编辑状态中线打断的问题

    摘要:在处理数据时,我们经常会遇到线打断的问题,比如需要指定在线上某处打断线,或者新建网络数据集时需要在线的交点处打段线等等.现将桌面版中我所遇到的线打断的工具总结如下: 在ArcGIS矢量处理数据时 ...

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

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