title: JSF - How can I format my global messages in <h:messages> in a visually appealing way?
body: <p>I'm not too familiar with using the <code>&lt;h:messages&gt;</code> element in JSF. What I'm trying to do is use it to display a list of global messages of varying severity that are generated by a method in my backing bean. Getting the messages into the <code>FacesContext</code> isn't too much of a problem, and my code is along these lines:</p>
  
  <pre><code>FacesMessage message;
  FacesContext context = 
      FacesContext.getCurrentInstance();
  message = new FacesMessage(
      FacesMessage.SEVERITY_INFO,
      "test message summary 1",
      "test message detail 1");
  context.addMessage(null, message);
  message = new FacesMessage(
      FacesMessage.SEVERITY_WARN,
      "test message summary 2",
      "test message detail 2");
  context.addMessage(null, message);
  message = new FacesMessage(
      FacesMessage.SEVERITY_ERROR,
      "test message summary 3",
      "test message detail 3");
  context.addMessage(null, message);
  // add more messages...
  </code></pre>
  
  <p>That all works fine. My problem is with trying to make the output of the <code>&lt;h:messages&gt;</code> tag look good on the page. Here is the relevant piece of my JSP file:</p>
  
  <pre><code>&lt;h:panelGrid border="1" columns="1" id="messagesPanelGrid"&gt;
      &lt;h:messages 
          id="messagesOutput"
          showSummary="true"
          showDetail="true" 
          layout="table"
          infoClass="info-message"
          warnClass="warn-message"
          errorClass="error-message"
          fatalClass="fatal-message" 
          globalOnly="true" /&gt;
  &lt;/h:panelGrid&gt;
  </code></pre>
  
  <p>This consistently looks like crap on the page. I am using an external CSS stylesheet to define styling classes. I've tried using <code>layout="list"</code> but then the list items span the whole page and make any block styling look bad, so I switched to <code>layout="table"</code>. I framed the <code>&lt;h:messages&gt;</code> inside a <code>&lt;h:panelGrid&gt;</code> so I would have some block-level element that I could apply styles to. It still doesn't look particularly nice.</p>
  
  <p>What I'm getting now:  </p>
  
  <pre><code>&lt;table border="1" id="myForm:messagesOutput"&gt;
      &lt;tr&gt;&lt;td class="error-message"&gt;&lt;span&gt;no port name match Could not match reported port name XXXX to a known port for vessel VESSEL A&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td class="error-message"&gt;&lt;span&gt;no port name match Could not match reported port name YYYY to a known port for vessel VESSEL B&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td class="error-message"&gt;&lt;span&gt;no port name match Could not match reported port name YYYY to a known port for vessel VESSEL C&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td class="error-message"&gt;&lt;span&gt;no port name match Could not match reported port name ZZZZ to a known port for vessel VESSEL D&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td class="warn-message"&gt;&lt;span&gt;arrival date missing No arrival date provided for vessel VESSEL B&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>What I'm trying to get:  </p>
  
  <pre><code>&lt;table border="1" id="myForm:messagesOutput" class="myMessagesTableClass"&gt;
      &lt;thead&gt;&lt;tr"&gt;&lt;td&gt;SUMMARY&lt;/td&gt;&lt;td&gt;DETAIL&lt;/td&gt;&lt;/tr&gt;&lt;/thead&gt;
      &lt;tr&gt;&lt;td class="error-message-summary"&gt;&lt;span&gt;no port name match&lt;/span&gt;&lt;/td&gt;&lt;td class="error-message-detail"&gt;&lt;span&gt;Could not match reported port name XXXX to a known port for vessel VESSEL A&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td class="error-message-summary"&gt;&lt;span&gt;no port name match&lt;/span&gt;&lt;/td&gt;&lt;td class="error-message-detail"&gt;&lt;span&gt;Could not match reported port name YYYY to a known port for vessel VESSEL B&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td class="error-message-summary"&gt;&lt;span&gt;no port name match&lt;/span&gt;&lt;/td&gt;&lt;td class="error-message-detail"&gt;&lt;span&gt;Could not match reported port name YYYY to a known port for vessel VESSEL C&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td class="error-message-summary"&gt;&lt;span&gt;no port name match&lt;/span&gt;&lt;/td&gt;&lt;td class="error-message-detail"&gt;&lt;span&gt;Could not match reported port name ZZZZ to a known port for vessel VESSEL D&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td class="warn-message-summary"&gt;&lt;span&gt;arrival date missing&lt;/span&gt;&lt;/td&gt;&lt;td class="warn-message-detail"&gt;&lt;span&gt;No arrival date provided for vessel VESSEL B&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <ul>
      <li>Messages are still in a table layout, but the "summary" and "detail" are in separate columns</li>
      <li>Generated table has a CSS class directly assigned to it</li>
      <li>The "summary" and "detail" parts of the message have separate style classes</li>
      <li>NICE TO HAVE: Table header row</li>
  </ul>
  
  <p>SCREENSHOT:<br>
  <img src="https://i.stack.imgur.com/JXh9e.jpg" alt="alt text"></p>
  
  <p><strong>Does anyone out there work with <code>&lt;h:messages&gt;</code> tags and have some ideas on how I can achieve this?</strong></p>
  
  <p>I'm not sure if it matters for this question, but I'm using MyFaces 1.2. I can't upgrade to 2.x at the moment.</p>