Google+ logo Twitter logo Youtube logo

Tags - Tables


Introduction

In HTML we can create tables. This can be useful for e.g. a calendar view. We can announce a table with a <table> tag. As you probably know tables exists out of rows and columns, in HTML: this is exactly the same. To indicate rows and columns there are some different tags. A row is indicated by a <tr> tag and a cell with a <td> tag. TR stands for table-row and TD stands for table-data.

Seperating information from columns

It is necessary for a table to "know" what's the heading of the table and to know what is the actual table data. So: we can put a row of columns i.e. a <thead> tag. (thead stands for table-head) The table-columns are marked with a tag: &th;th>. (th stands for table-head) The actual table information has to be in a <tbody> tag. With these tags we can seperate the table-heading from the actual table-data.

Example

Say; we want to create an calender with some activities, it could look like this;

What? When? Costs?
learn HTML now free
take a walk tomorrow free
  • In this example there is 1 table (the <table> tag)
  • In this example the table has 1 attribute (border="1")
  • In this example there are 3 rows (the <tr> tags)
  • Each row exists out of 3 cells (<td> tags)
So; we announce the table with the <table> tag. Then we announce a row (with the <tr> tag), the cells in the row are created with the <td> tags. After all cells have been created we close the table-row tag with the closing </tr> tag. If all the rows are closed, we can finally close the table itself.

Beside all this; we indicate the table-head with the <thead> tag, and we announce the actual table-data with the <tbody> tag.

Case study

The example above looks like this:

What? When? Costs?
learn HTML now free
take a walk tomorrow free

Notes

This is a lot of information; the fact that tables exists out of multiple tags can be quite confusting, don't worry about it! That you not fully understand tables is understandeble, but; it will come naturally. I hope to give you a bit more overview with the list down-under.

In every image, we see the same table; but the tag in the image-heading has one or more background-images:












Final words

As indicated above, this part is a lot of information with many (sometimes confusing) tags. If you feel that you do not understand tables, don't worry!

It would be nice if you understand it but it's not a must. If you like you can play further with tables.

Fully understanding tables will come naturally, in time.


Comments (18) Post comment

  • Direct url DrlTN (May 21, 2021 @ 16:05)
    <a href=\"https://5bz.ru/\">áàçà ïðåäïðèÿòèé ðîññèè 2019 áåñïëàòíî</a>
  • Direct url DshJL (May 18, 2021 @ 09:23)
    Drugs information leaflet. Generic Name. \r\n<a href=\"https://paxil4u.top\">can i purchase paxil</a> in Canada \r\nAll trends of drug. Read now.
  • Direct url CfxZS (May 16, 2021 @ 18:29)
    cialis without a doctor prescription <a href=\"https://topcialistabs.com/\">www.topcialistabs.com</a> buying cialis online safely
  • Direct url XhvWB (May 15, 2021 @ 18:39)
    buy cialis <a href=\"https://cialisortadalafil.com/\">cialis without a doctor prescription usa</a> what happens if you take 2 cialis
  • Direct url KrkWB (May 15, 2021 @ 05:10)
    sildenafil citrate online <a href=\"https://sildenafilviagratop.com\">where to buy female viagra</a> sildenafil 20 mg tablets
  • Direct url BomFO (May 13, 2021 @ 19:56)
    sildenafil 100mg <a href=\"https://edviagramaster.net/\">no prescription viagra</a> viagra boys
  • Direct url UyjSN (May 12, 2021 @ 22:35)
    resume for administrative assistant <a href=\"https://writingacoverletteronline.com/\">top resume discount</a> recent graduate resume
  • Direct url RybMM (May 11, 2021 @ 18:44)
    resume coach <a href=\"http://coverletterforresumetop.com/\">cover letter creator</a> good resume fonts
  • Direct url Kathrynpem (May 11, 2021 @ 16:00)
    cialis generic over the counter <a href=\"http://tadalafilled.com/\">generic cialis</a> cialis shelf life
  • Direct url Martinapiepe (May 7, 2021 @ 12:59)
    sildenafil 100 <a href=\"https://mysildenafilkr.com/\">canadian pharmacy viagra</a> viagra triangle
  • Direct url Francesisoft (May 6, 2021 @ 18:56)
    alternative to viagra <a href=\"https://mrviagrashop.com\">sildenafil cost</a> sildenafil costs
  • Direct url Rebeccagiz (May 5, 2021 @ 23:58)
    service learning review essay <a href=\"http://writemyessayslfd.com/\">writing an analytical essay</a> an essay on community service
  • Direct url StellaAnach (May 4, 2021 @ 03:02)
    how to write a theme essay <a href=\"https://topessaywriterfas.com/\">writing an essay about yourself</a> how to write an analysis essay on a movie
  • Direct url TiffanyNon (May 1, 2021 @ 22:07)
    cialis for sale online in canada <a href=\"https://toptadalafiltabs.com/\">viagra vs cialis hardness</a> canadian online pharmacy cialis
  • Direct url JaniceCak (April 30, 2021 @ 15:47)
    cialis daily review <a href=\"https://mycialistabs.com/\">natural cialis</a> buy cialis online overnight shipping
  • Direct url DmiDM (April 28, 2021 @ 17:17)
    Meds information sheet. Effects of Drug Abuse. \r\n<a href=\"https://topregabalin.top\">where buy pregabalin no prescription</a> in the USA \r\nAll trends of drug. Read information here.
  • Direct url QtmKB (January 10, 2021 @ 17:49)
    Pills prescribing information. Short-Term Effects. <a href=\"https://prednisone4u.top\">where can i buy prednisone price</a> in the USA. Actual trends of pills. Read information now. \r\n<a href=http://www.foodforfox.ir/showpost/%D8%AF%D8%A7%D8%B3%D8%AA%D8%A7%D9%86-%D8%AA%D8%B1%D8%B3%D9%86%D8%A7%DA%A9-%DB%8C%DA%A9-%D8%B4%D8%A8-%D8%A8%D8%A7-%D8%AF%D9%88%D8%B3%D8%AA%D8%A7%D9%86>Some what you want to know about medicines.</a> <a href=https://tmtexperience.com/producto/el-camino-de-la-vida-reflexiones-experiencias-y-consejos/#comment-137839>Best information about medicine.</a> <a href=https://class.kh.edu.tw/3299/forum/subject_content/161>All information about medicines.</a> 8774d4b
  • Direct url REXFORD (October 11, 2020 @ 18:11)
    GOODWEBSITE

Leave a comment ...

Name (will be visible)
E-mailaddress (will not be shown)
Comment
Type the code illustrated below

Back to top