HTML - Table

About

NOTE: This page is a daughter page of: HTML, and is related to: CSS

Simple HTML Table

  <table border="0" width="100%">
   <tr>
    <th>Header 1</th>
    <th>Header 2</th>
   </tr>
   <tr>
    <td>Charges</td>
    <td align="right">$100</td>
   </tr>
  </table>

Meeting Notes Table

Here's a table with some nice colors.

HTML5 Markup:

<table border="1" bordercolor="#EEE" cellspacing="0" style="width:100%;background-color:#fdfdfd">
  <tr>
    <td style="width:100px"><b><font color="#0000ff">Meeting</font></b></td>
    <td><b>Special Meeting</b><br></td>
  </tr>
  <tr>
    <td><b><font color="#0000ff">Agenda</font></b></td>
    <td>Talk about stuff.<br>
  </td>
  </tr>
    <tr>
    <td><b><font color="#0000ff">Attendance</font></b></td>
    <td><b><font color="#6aa84f">anoske, another</font></b><br></td>
  </tr>
  <tr>
    <td><b><font color="#0000ff">Notes</font></b></td>
    <td>We discussed life, the universe and everything.<br><b>Two stages:</b><br>
      <ol>
        <li>Universe created.</li>
        <li>Turns out it was just an egg.</li>
      </ol>
    </td>
  </tr>
  <tr>
    <td><b><font color="#0000ff">Action Items</font></b></td>
    <td>
    <ul>
      <li><b><font color="#6aa84f">anoske</font></b> - Ponder more on life.</li>
    </ul>
    </td>
  </tr>
</table>

---

Looks like:

Meeting	Special Meeting
Agenda	Talk about stuff.
Attendance	anoske, another
Notes	We discussed life, the universe and everything. Two stages: Universe created. Turns out it was just an egg.
Action Items	anoske - Ponder more on life.

Links

• DirtyMarkup.com - a brilliant tool which formats the HTML you paste in, and shows any errors / unmatching tags.