This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Tables


There are times when we wish to display data that is sorted into columns and rows. This is called tabular data and HTML has a <table> tag and sub elements for organizing such data. For example, a vegetable comparison table might consist of vegetable names and their corresponding color or nutritional value. Lets construct a simple table.

To begin, we open the <table> tag:

<table>

Immediately after <table> tag, we can include a <caption> tag to quickly inform the reader the intent of the table.

<caption>A table of vegetable colors.</caption>

Tables consist of rows and columns. The table row <tr> tag is used to seperate table rows, while table data <td> fits within each row.

Also note, the first row of this table will be reserved for table headers <th>. Headers let a reader know what each column, or row, of a table represents.

<tr>

  <th>Name of Vegetable</th>

  <th>Color</th>

</tr>

Additional table rows <tr> and table data <td> will follow the same format as the table headers <th>, i.e. they will be typed in the same order.

<tr>

  <td>Carrot</td>

  <td>Orange</td>

</tr>

<tr>

  <td>Asparagus</td>

  <td>Green</td>

</tr>

Lastly, we will close the table tag.

</table>

External Resources

Hackbook: Tables

Task Discussion


  • Karam   Oct. 10, 2013, 2:15 p.m.

    Here is a list of OSX Shortcuts that I use on a daily basis:

    http://htmlpad.org/HTML5-Tables/

  • EcologicalHumanist   July 10, 2013, 12:38 p.m.

    http://jsfiddle.net/8DLTt/8/

     

    table of the political affiliation of aquatic mammals.

  • bryanwoodsmall   June 30, 2013, 4:37 p.m.

    http://jsfiddle.net/EV3n2/

  • zoki   April 19, 2013, 4:33 a.m.

    http://jsfiddle.net/fPL3N/

  • Adri   March 23, 2013, 11:31 p.m.

    And here is mine!

    http://webcrafting.adrimarie.us/samples/tables.html

  • Steve   March 21, 2013, 8:13 a.m.
  • Gerardo Muñoz Asca   Jan. 22, 2013, 11:45 p.m.
  • Joris Pekel   Oct. 10, 2012, 7:18 a.m.
    Looks nice in the Wordpress CSS
  • Joanne   Sept. 4, 2012, 7:46 a.m.

    Here's my table. Thanks to others for the CSS help!
     

    http://htmlpad.org/joannetable/

  • al read   Sept. 4, 2012, 7:48 a.m.
    In Reply To:   Joanne   Sept. 4, 2012, 7:46 a.m.
    Thanks for your message. I will be out of the office today on annual leave. If your enquiry is urgent, please SMS me on my mobile. Kind regards, Alan Read Head of Learning Technologies Learning Technologies Group Pearson UK +44 (0) 7703 750913 This email was sent by a company owned by Pearson plc, registered office at 80 Strand, London WC2R 0RL. Registered in England and Wales with company number 53723
  • saravanan   Aug. 16, 2012, 6:53 a.m.
  • al read   Aug. 16, 2012, 6:56 a.m.
    In Reply To:   saravanan   Aug. 16, 2012, 6:53 a.m.
    Thanks for your message. I will be out of the office on annual leave until Monday 20th August If your enquiry is urgent, please SMS me on my mobile. Kind regards, Alan Read Head of Learning Technologies Learning Technologies Group Pearson UK +44 (0) 7703 750913 This email was sent by a company owned by Pearson plc, registered office at 80 Strand, London WC2R 0RL. Registered in England and Wales with company number 53723
  • Anonym   Aug. 4, 2012, 12:29 a.m.

    Just finished styling this beauty

  • Motlar   July 27, 2012, 6:40 a.m.
  • caroline   July 26, 2012, 6:22 p.m.

    http://htmlpad.org/veggiecolor/

  • Connor.Tinnion   July 26, 2012, 6:31 a.m.

    http://jsfiddle.net/PHEaJ/

    What do you guys think?

  • saravanan   Aug. 15, 2012, 3:41 a.m.
    In Reply To:   Connor.Tinnion   July 26, 2012, 6:31 a.m.

    Nice work. you used css too.

  • al read   Aug. 15, 2012, 3:43 a.m.
    In Reply To:   saravanan   Aug. 15, 2012, 3:41 a.m.
    Thanks for your message. I will be out of the office on annual leave until Monday 20th August If your enquiry is urgent, please SMS me on my mobile. Kind regards, Alan Read Head of Learning Technologies Learning Technologies Group Pearson UK +44 (0) 7703 750913 This email was sent by a company owned by Pearson plc, registered office at 80 Strand, London WC2R 0RL. Registered in England and Wales with company number 53723
  • Toss   July 19, 2012, 5:55 p.m.
  • Anonym   July 19, 2012, 7 p.m.
    In Reply To:   Toss   July 19, 2012, 5:55 p.m.
    unsuscribe On Thu, Jul 19, 2012 at 2:55 PM, P2PU Notifications <
  • Anonym   Aug. 4, 2012, 9:03 a.m.
    In Reply To:   Toss   July 19, 2012, 5:55 p.m.

    Your table is very poorly coded because you forgot to close the table, body, and html tags. I fixed it for you and made some slight adjustments in CSS to make your table look nicer.

  • chinnan   July 7, 2012, 12:16 p.m.
  • hamilton mena quejada   June 23, 2012, 10:26 p.m.

    Pagina con el uso de tablas en HTML 5.

    http://htmlpad.org/tablashmq/

  • Giorgos Dimop   May 31, 2012, 12:40 p.m.
  • JoshM   May 14, 2012, 5:26 p.m.

    Just a little table

     

    http://htmlpad.org/htmltablep2pu/

  • Al   May 10, 2012, 9:34 p.m.
    Look at me, I'm a Table
    List of Awesome things Dates they come out
    Diablo 3 May 15
    Rise Of the Pheonix May 15
    Do we need anything more? No!