1 / 44

TABLES

TABLES. Tables. Consider the following web-page. This web-page shows a H1 followed by a TABLE The TABLE has the following parts: a THEAD a TFOOT a TBODY a CAPTION The THEAD, TFOOT and TBODY contains TRs The TRs contain either THs or TDs Many of these have attributes. Tables.

milos
Download Presentation

TABLES

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. TABLES

  2. Tables • Consider the following web-page

  3. This web-page shows a H1 followed by a TABLE • The TABLE has the following parts: • a THEAD • a TFOOT • a TBODY • a CAPTION • The THEAD, TFOOT and TBODY contains TRs • The TRs contain either THs or TDs • Many of these have attributes

  4. Tables • A table is delimited by <TABLE> and </TABLE> • Inside these tags we have a TBODY • We can also have a THEAD, TFOOT and a CAPTION if we wish

  5. <HTML> <HEAD> <TITLE>Simple Table</TITLE> </HEAD> <BODY> <TABLE> <TBODY> <TR> <TD>10-11</TD> <TD>Maths</TD> </TR> <TR> <TD>11-12</TD> <TD>Physics</TD> </TR> </TBODY> </TABLE> </BODY> </HTML>

  6. Tables and style • A <TABLE> tag has several attributes, some of which can be controlled by stylesheets and some of which cannot • I expect that, in the future, all attributes will be controllable by stylesheets

  7. Rules between Table data • One <TABLE> attribute that still cannot be controlled by a stylesheet is the RULES attribute • This can take one of the following values:none (default), groups, cols, rows, all

  8. <HTML> <HEAD> <TITLE>Simple Table</TITLE> </HEAD> <BODY> <TABLE RULES=“all”> <TBODY> <TR> <TD>10-11</TD> <TD>Maths</TD> </TR> <TR> <TD>11-12</TD> <TD>Physics</TD> </TR> </TBODY> </TABLE> </BODY> </HTML>

  9. <HTML> <HEAD> <TITLE>Simple Table</TITLE> </HEAD> <BODY> <TABLE RULES=cols> <TBODY> <TR> <TD>10-11</TD> <TD>Maths</TD> </TR> <TR> <TD>11-12</TD> <TD>Physics</TD> </TR> </TBODY> </TABLE> </BODY> </HTML>

  10. <HTML> <HEAD> <TITLE>Simple Table</TITLE> </HEAD> <BODY> <TABLE RULES=rows> <TBODY> <TR> <TD>10-11</TD> <TD>Maths</TD> </TR> <TR> <TD>11-12</TD> <TD>Physics</TD> </TR> </TBODY> </TABLE> </BODY> </HTML>

  11. THEAD • A table head is used to explain the data in the TBODY

  12. <HTML> <HEAD> <TITLE>Simple Table</TITLE> </HEAD> <BODY> <TABLE RULES=all> <THEAD> <TR> <TH> Time </TH> <TH> Subject </TH> </TR> </THEAD> <TBODY> <TR> <TD>10-11</TD> <TD>Maths</TD> </TR> <TR> <TD>11-12</TD> <TD>Physics</TD> </TR> </TBODY> </TABLE> </BODY> </HTML>

  13. TFOOT • A table foot can be used to summarise the data in the table

  14. <TABLE RULES=all> <THEAD> <TR> <TH> Time </TH> <TH> Subject </TH> </TR> </THEAD> <TFOOT> <TR> <TD> Number of hours </TD> <TD> 2 </TD> </TR> </TFOOT> <TBODY> <TR> <TD>10-11</TD> <TD>Maths</TD> </TR> <TR> <TD>11-12</TD> <TD>Physics</TD> </TR> </TBODY> </TABLE>

  15. CAPTION • A caption describes the complete table

  16. <TABLE RULES=all> <THEAD> <TR> <TH> Time </TH> <TH> Subject </TH> </TR> </THEAD> <TFOOT> <TR> <TD> Number of hours </TD> <TD> 2 </TD> </TR> </TFOOT> <CAPTION> Lecture Schedule </CAPTION> <TBODY> <TR> <TD>10-11</TD> <TD>Maths</TD> </TR> <TR> <TD>11-12</TD> <TD>Physics</TD> </TR> </TBODY> </TABLE>

  17. TDs of Non-standard sizes • Sometimes, we need TDs that are wider or higher than the normal ones in a table

  18. In the previous slide, the “Session” TDs in the TBODY were taller than the normal TDs • each of them was as tall as two normal rows • In the TFOOT, the “Number of hours” TD was wider than the normal TDs • it was as wide as two normal columns • This done by using two attributes of TDs: • the ROWSPAN attribute enables us to make taller than normal TDs • the COLSPAN attribute enables us to make wider than normal TDs

  19. <TABLE RULES=all> <THEAD> <TR> <TH> Session </TH> <TH> Time </TH> <TH> Subject </TH> </TR> </THEAD> <TFOOT> <TR> <TD COLSPAN=2> Number of hours </TD> <TD> 4 </TD> </TR> </TFOOT> <CAPTION> Lecture Schedule </CAPTION> <TBODY> <TR> <TD ROWSPAN=2> Morning </TD> <TD>10-11</TD> <TD>Maths </TD> </TR> <TR> <TD>11-12</TD> <TD>Physics </TD> </TR> <TR> <TD ROWSPAN=2> Afternoon </TD> <TD>14-15</TD> <TD>Chem </TD> </TR> <TR> <TD>16-17</TD> <TD>Logic </TD> </TR> </TBODY> </TABLE>

  20. Non standard THs • We can also have THs of non-standard sizes • We use the same ATTRIBUTES: • COLSPAN • ROWSPAN

  21. <TABLE RULES=all> <THEAD> <TR> <TH COLSPAN=2> Lecture Time </TH> <TH> Lecture </TH> </TR> <TR> <TH> Session </TH> <TH> Time </TH> <TH> Subject </TH> </TR> </THEAD> <TFOOT> <TR> <TD COLSPAN=2> Number of hours </TD> <TD> 4 </TD> </TR> </TFOOT> <CAPTION> Lecture Schedule </CAPTION> <TBODY> <TR> <TD ROWSPAN=2> Morning </TD><TD>10-11</TD> <TD>Maths</TD> </TR> <TR> <TD>11-12</TD> <TD>Physics</TD> </TR> <TR> <TD ROWSPAN=2> Afternoon </TD> <TD>14-15</TD> <TD>Chem</TD></TR> <TR> <TD>16-17</TD> <TD>Logic</TD> </TR> </TBODY> </TABLE>

  22. Using PADDING in TDs • We can use PADDING in TDs to provide some “white space” that makes the table content more legible

  23. Compare the two tables

  24. <STYLE> TD {PADDING-LEFT : 20 ; PADDING-RIGHT : 20} </STYLE>

  25. Using stylesheets to affect layout of TD content • You should already have seen the TEXT-ALIGN attribute which can be used in stylesheets to affect content layout • We can, of course, use this to affect the layout of the contents of TDs and THs

  26. <STYLE> TH {TEXT-ALIGN : right} TD {PADDING-LEFT : 20 ; PADDING-RIGHT : 20; TEXT-ALIGN : center} </STYLE>

  27. Compare the two tables

More Related