Good morning! I will be using a table (gasp!) to display conference schedule information and the question comes to mind: What HTML tags are proper for use in table structures?

For example, are these proper and appropriate (and valid)?:

 <tr>
      <th>
            <ul>
                    <li class="A">8:00 AM</li>
                    <li class="B">Registration</li>    
                    <li class="C">Come sign in.</li>
            </ul>
       </th>
 </tr>

 <tr>
      <th>
               <p class="A">8:00 AM</p>
               <p class="B">Registration</p>    
               <p class="C">Come sign in.</p>
       </th>
 </tr>

 <tr>
      <th>
               <div class="A">8:00 AM</div>
               <div class="B">Registration</div>
               <div class="C">Come sign in.</div>
       </th>
 </tr>

 <tr>
      <th>
               <span class="A">8:00 AM</span>
               <span class="B">Registration</span>
               <span class="C">Come sign in.</span>
       </th>
 </tr>

Clearly, I want to style the elements within each cell.

Thanks very much for your expert feedback and recommendations.

(Yes, I know building this grid out using DIV is another option but I believe using a table to display tabular data is proper)

1 answer

1
point

Using a table to display tabular data is proper practice, and for your tagging question, the span option seems perfectly fine to me.

p is a child of div and therefore I wouldn't use it in a th as that is a table head.

I also would not suggest using a div inside a th, but I see no problems using a span withing a th or td or tr.

That's all based on personal preference and experience, but I'd go with the span option.

Remember to build you tables like:

 <table width="200" border="1">
  <tr>
    <th scope="col"><span class="A">Time</span></th>
    <th scope="col"><span class="B">Name</span></th>
    <th scope="col"><span class="C">Signator</span></th>
  </tr>
  <tr>
    <td><span class="A">8:00 AM</span></td>
    <td><span class="B">Kyle</span></td>
    <td><span class="C">Come sign in.</span></td>
  </tr>
  <tr>
    <td><span>content1</span>;</td>
    <td><span>content2</span></td>
    <td><span>content3</span></td>
  </tr>
</table>

This will build something like this:

alt text

Then you can style the table and spans accordingly.

Hope that helps :) EDIT:

I just re-read your question and thinnk you want the three spans in one th, to outline different words? Use spans. :)

Answered over 6 years ago by Kyle Sevenoaks