எழுதப் பழகுவோம் எச். ரி. எம். எல் – பகுதி 4

இனி ஒரு மிகத் தேவையான ஒரு பட்டியைப் பார்ப்போம். பெரும்பாலும் அட்டவணை (Table) இல்லாத இணையப் பக்கங்களே இல்லை எனலாம். தெரியும்படியோ அல்லது மறைமுகமாகவோ அது இருக்கலாம். எப்படி என்பதை இதன் இறுதியில் தெரிந்து கொள்வீர்கள்.அட்டவணை எழுதும்போது சில நேரம் குழப்பம் நேருவது போலிருக்கலாம் சற்று
கவனித்தீர்களானால் எளிதாகச் செய்துவிடலாம்.

<TABLE> </TABLE> என்பவை இதன் தொடக்க, முடிவு பட்டிகளாக இருக்கும்.

ஒரு அட்டவணை என்றால் என்னென்ன இருக்கும்? மேலிருந்து கீழாக வரிசை (row)
இருக்கும். ஒவ்வொரு வரிசையிலும் குறுக்காக பல பத்திகள் (column) இருக்கும். (ஒரு excel worksheet ஐ நினைவு கூறுங்கள்). முதல் வரிசையில் இடமிருந்து வலமாக ஒவ்வொரு பத்திக்குமான தலைப்பு இருக்கும். இதுதான் சாதாரணமாக எந்த அட்டவனையாக இருந்தாலும் நாம் காண்பது. இதைஎப்படி இந்த மொழியில் குறிப்பது?

வரிசை என்பது TR (Table Row) என்பதாகவும் (excel இல் 1, 2, 3 என்று மேலிருந்து கீழாக இருப்பதுபோல்), பத்தி என்பது TD (Table Data) என்பதாகவும் (excel இல் A B C D என்று இடமிருந்து வலமாக இருப்பதுபோல்) அமைந்திருக்கும்.

முதலில் ஒரு வரியை எடுத்துக் கொண்டு, அதிலுள்ள பத்திகளை இடமிருந்து வலமாக எழுத வேண்டும். இவ்வாறாக ஒவ்வொரு வரியிலுள்ள பத்திகளையும் எழுதி முடிக்க வேண்டும்.

ஒரு வரி கொண்ட ஒரு அட்டவணையைப் எளிதான பார்போம்.

<TABLE border="2">
<TR>
<TD>
Orange
</TD>
<TD>
Apple
</TD>
<TD>
Banana
</TD>
</TR>
</TABLE>

மேற்கண்ட அட்டடவணை TABLE என்ற பட்டியோடு துவங்குகிறது. border="2"
என்ற பண்பு 2 பட தனிமம் அளவிற்கு அதன் ஓரம் அமைந்திருக்க வேண்டும் என்று
காட்டுகிறது. அதன் கீழே <TR> என்பது ஒரு வரியின்(row) துவக்கம் என்று காட்டுகிறது.
அதன் கீழே இருக்கும் <TD> என்பது(Table Data ) பத்தியின் தொடக்கப் பட்டியாக அமையும். Orange என்பது அந்த பத்தியில் எழுதப் படும் தரவு(data) ஆகும். தொடர்ந்து </TD> என்பது அந்த தரவு முடிகிறது என்று காட்டுகிரது. இவ்வண்ணமே, Apple, Banana என்ற தரவுகளும் ஒவ்வொரு <TD> </TD> சோடிகளுக்கு இடையில் அமையும்.

மேலுள்ள பட்டியலை உலவியில் பார்தீர்களானால் புரியும்.

இது அட்டவணையின் துவக்கம்தான். மேலும் பலவற்றை தொடர்ந்து காணலாம்.

குறிப்பு:
இந்த ஆக்கத்தில் வரும் எடுத்துக் காட்டுக்களை உடனடியாக சோதிக்க கீழ்க்கண்ட
வலைத் தலத்திற்குச் செல்லுங்கள்:
http://www24.brinkster.com/umarthambi/html_try/view_result.html
இதில் எடுத்துக் காட்டுக்களை ஒட்டி உடனடடியாக விளைவை (result) காண முடியும்.
மேலும், நீங்கள் விரும்பிய மாறுதல்களைச் செய்து சோதிக்கலாம்.
ஒவ்வொரு தடவையும் கோப்பாகச் சேமிக்க வேண்டிய தேவையில்லை.

அவ்வப்போது வரும் எடுத்துக் காட்டுக்களைச் சோதித்துக் காண வேண்டுகிறேன்.
இது மேற்கொண்டு வரும் பகுதிகளை எளிதாக புரிந்து கொள்ள உதவும்

நாம் ஒரு வரியை (row) எடுத்துக் கொண்டு (TR) அதில் எத்தனை
பத்திகள் (column) வேண்டும் (TD) குறிப்பிட வேண்டும்.

<HTML>
<TABLE border="1">

<TR>
<TD>
One
</TD>
</TR>

</TABLE>
<HTML>

மேற்கண்ட எடுத்துக் காட்டில் மொத்தம் எத்னை சதுரங்கள் வரும் என்று
எண்ணுகிறீர்கள்? நீங்கள் எண்ணுவது சரிதான். ஒன்றே ஒன்றுதான்! அதாவது ஒரு
அறை (cell) கொண்ட 'அட்டவணை'. காரணம் <TR> </TR> பட்டிகளுக்கு
இடையே ஒரு <TD> </TD> சோடிதான் உள்ளது. One என்ற வரி, <TD>
</TD> பட்டிகளுக்கு இடையில் இருப்பதால் அது அந்த அறையில்(cell)
அமைந்திருக்கும். மேற்கண்டதை வெட்டி, ஒட்டி விளைவைப் பாருங்கள். மேலும் ஒரு
<TD> </TD> பட்டியைச் சேர்த்து, அவற்றிற்கிடையில் எதாவது ஒரு சொல்லை
இட்டு சோதித்துப் பாருங்கள். (குறிப்பு: <TD> </TD> பட்டிகளுக்கு இடையில் ஏதாவது எழுத வேண்டும். இல்லையென்றால் இரண்டாவது அறை இருப்பதே தெரியாது.)

இனி அட்டவணையிலுள்ள தரவுகளுக்கு (data) எவ்வாறு தலைப்பிடுவது என்று
பார்ப்போம்.

பொதுவாக அட்டவணையின் முதல் வரியே (முதல் <TR> </TR>) தலைப்பாக
அமையும். இதில் <TD> </TD> பட்டிகளுக்கு பதிலாக <TH> </TH>
பட்டிகளை இடவேண்டும். TH ஆனது Table Head என்பதைக் குறிக்கும். கீழே
உள்ள எடுத்துக் காட்டைப் பாருங்கள்:

<HTML>
<TABLE border="1">

<TR>
<TH>
This is Heading
</TH>
</TR>

<TR>
<TD>
This cell contains Data
</TD>
</TR>

</TABLE>
<HTML>

தலைப்பானது, தடித்த (bold) எழுத்துருக்களுடன் அறைச் சதுரத்தில் மையப்
படுத்தப் பட்டிருக்கும். தனியாக <B>, <CENTER> பட்டிகளைக் கையாளத்
தேவை இல்லை.

கீழ்க் கண்டதை வெட்டி
http://www24.brinkster.com/umarthambi/html_try/view_result.html
என்ற தலத்திற்குச் சென்று ஒட்டி விளைவைப் பாருங்கள். தேவை இருந்தால்
மாற்றம் செய்து சோதித்துப் பாருங்கள்.

<HTML>
<TABLE BORDER="1">
<TR>
<TH>
Date
</TH>
<TH>
Time
</TH>
<TH>
Language
</TH>
</TR>
<TR>
<TD>
24-12-2001
</TD>
<TD>
8:00
</TD>
<TD>
English
</TD>
</TR>
<TR>
<TD>
25-12-2001
<TD>
10:30
</TD>
<TD>
Tamil
</TD>
</TR>
</TABLE>
</HTML>

அட்டவணையில் என்னென்ன பண்புகளைக் கையாளலாம் என்று பார்ப்போம்.

அட்டவணை பண்புகள்:

WIDTH
ALIGN
BGCOLOR
BORDER
CELLSPACING
CELLPADDING

WIDTH – அட்டவணை எவ்வளவு அகலத்தில் இருக்க வேண்டும் என்று குறிப்பது.
இதை, சதவீதத்திலோ அல்லது படத்தனிம அளவிலோ குறிக்கலாம்

ALIGN – (left, center, right) அட்டவணை படிவத்தில் எப்படி அமைய
வேண்டும் என்று குறிப்பது.

BGCOLOR – அட்டவணையின் பின்னரங்க வண்ணத்தை மாற்ற.

BORDER – அட்டவணையைச் சுற்றியிருக்கும் கோட்டின் தடிமன் எவ்வளவு இருக்க
வேண்டும் என்று குறிப்பது.

CELLSPACING – ஒவ்வொரு அறைக்கும் (cell) இடைவெளி எவ்வளவு இருக்க
வேண்டும் என்று குறிப்பது.

CELLPADDING –  அறையில் (cell) எழுதப் படும் எழுத்துக்கள் (data)
அறைச் சுவற்றிலிருந்து எவ்வளவு தூரத்தில் இருக்க வேண்டும் என்று குறிப்பது.

இந்தப் <TABLE> பட்டியைப் பற்றி சொல்ல ஆரம்பிக்கும்போது அட்டவணையை
ஏறத்தாழ எல்லா பக்கங்களிலும், தெரியும் படியோ அல்லது தெரியாதவாறோ
பயன் படுத்துகிறார்கள் என்று சொன்னேன். ஒரு பக்கத்தில் உள்ள படங்களை,
எழுத்துக்களை, பத்திகளை ஒழுங்கில் வைக்க அட்டவணை பட்டியைப் பயன்
படுத்துகிறார்கள். BORDER என்ற பண்பில் "0" என்று கொடுத்துவிட்டால்
அட்டவணையைச் சுற்றி இருக்கும் கோடு மறைந்துவிடும். எனவே அது ஒரு அட்டவணை
போல் தெரியாது. Yahoo, Hotmail போன்ற ஏதாவது ஒரு பக்கத்தின்
மூலக் குறியீடுகளை (HTML source) ஊன்றிப் பார்த்தீர்களானால் தெரியும்.

கீழ் உள்ளதை வெட்டி,
http://www24.brinkster.com/umarthambi/html_try/view_result.html
இதில் ஒட்டி விளைவைப் பாருங்கள்.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<title>Table without border</title>
</head>
<body>

<table border="0" cellpadding="0" cellspacing="0"
width="100%">
<tr>
<td width="33%">To further enable you to locate
the problem, you may start
the Java console (under MSIE or NS). If you're
using Netscape, you'll find
it under the Communicator item in the Netscape
menu (Java Console). Using
MSIE, you'll find it under View (Java Console) in
the MSIE menu. The Java
Console will give you more details than the status
bar, and may help you
find out why the applet will not run. Often, it
will show you that the
applet depends on more than one class file, and
you'll need to upload that
class file to your server as well.
<p>The applet may be written for a newer JDK than
you have on your system.
Most applets will work with MSIE4, and Netscape4
as well, provided you have
applied the latest JDK 1.1 patch from </p>
</td>
<td width="33%">
<p align="center"><font size="7">An Example of
using table to align contents
of a page </font></td>
<td width="34%">
<ol>
<li>First, select the Java applet you would like
to add to your site. Many
of the applets are free with some requiring only
a link back to the
author's site. Others have a link to the
author's site written in them
which can be removed by paying a registration
fee. Still others require a
fee before they can be used.
<p></li>
<li>Download the zip file to a directory on your
computer (make sure you
remember the directory where you downloaded it).
The zip file contains the
necessary files to run the Java applet.
<p>In a few cases, you must download the jar or
class files individually.
Note that in Netscape Communicator, you must
hold down the shift key and
then click the link to download the files. </li>
</ol>
</td>
</tr>
</table>
</body>
</html>

ஒவ்வொரு அறையிலுள்ள தரவுகளை தனித்தனியாக இடப் பக்கமோ, வலப்பக்கமோ
அல்லது நடுவிலோ ஒழுங்கு (ALIGN) படுத்தலாம். left, right, center, justify முதலான
பண்புகளை பயன்படுத்தலாம். மேல் கீழாக(VALIGN) baseline, bottom, middle, top
முதலான பண்புகளை பயன்படுத்தலாம்.
மேலும் சில நேரம் ஒரே தலைப்பின் கீழ் இரண்டு மூன்று தரவுகள் வரலாம்.
எடுத்துக் காட்டாக, Time என்ற தலைபின் கீழ் AM PM என்ற இரு தரவுகளை இட
நேரிடலாம். இதற்காக இரண்டு அறைகளை ஒன்றாக்க வேண்டும். (Excel இல் cell merging செய்வது போல்) இடமிருந்து வலமாகவோ அல்லது மேலிருந்து கீழோ அறைகளை இணைக்கலாம். இதைச் செய்வதற்கு COLSPAN, ROWSPAN ஆகிய பண்புகளை
பயன்படுத்த வேண்டும்.

கீழுள்ள எடுத்துக் காட்டை
http://www24.brinkster.com/umarthambi/html_try/view_result.html
பக்கத்தில் ஒட்டி எப்படி தோன்ருகிறது என்று பாருங்கள்.

<HTML>
<BODY>
<TABLE ALIGN="center" BORDER="1" CELLSPACING="1"
CELLPADDING="0" WIDTH="40%">
<TR>
<TH COLSPAN="3" BGCOLOR="#F0F8FF">
Time Table
</TH>
</TR>
<TR>
<TD ALIGN="center" VALIGN="middle" rowspan="5"
BGCOLOR="#F5F5DC">
Tution Timings
<TD ALIGN="center" VALIGN="middle">
AM
</TD>
<TD ALIGN="center" VALIGN="middle">
PM
</TD>
</TR>
<TR>
<TD ALIGN="center" VALIGN="middle">
8:00
</TD>
<TD ALIGN="center" VALIGN="middle">
4:30
</TD>
</TR>
<TR>
<TD ALIGN="center" VALIGN="middle">
11:00
</TD>
<TD ALIGN="center" VALIGN="middle">
7:00
</TD>
<TR>
<TD ALIGN="center" VALIGN="middle">
10:00
</TD>
<TD ALIGN="center" VALIGN="middle">
5:30
</TD>
</TR>
<TR>
<TD ALIGN="center" VALIGN="middle">
10:00
</TD>
<TD ALIGN="center" VALIGN="middle">
8:30
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

மேற்கண்ட எடுத்துக்காட்டில் "Time Table" என்ற தலைப்புக்காக 3 அறைகளை
இடமிருந்து வலமாக சேர்த்திருக்கிறோம். அதை COLSPAN="3" என்பதாக
குறித்திருக்கிறோம். "Tution Timings" என்ற பகுதிக்காக 5 அறைகளை மேலிருந்து கீழாக சேர்த்திருக்கிறோம்.

ஒவ்வொரு அறையிலும் பின்னரங்கு வண்ணத்தைச் சேர்பதற்கு நாம் முன்பே பார்தது
போல் BGCOLOR என்ற பண்பை பயன்படுத்த வேண்டும்.

இவையன்றி அட்டவணைகும் தலைப்புத் தரலாம். இதற்கு <CAPTION> என்ற பட்டியைப் பயன்படுத்த வேண்டும். ALIGN என்ற பண்பில் left, right, top, bottom என தேவையான இடத்தில் தலைப்பைப் பெறலாம். இந்தப் பட்டியை அட்டவணை பட்டி (<TABLE>) யினுள்
எந்த இடத்திலும் பயன் படுத்தலாம் என்றாலும் <TABLE> பட்டிகு அடுத்து
பயன் படுத்தினால் குழப்பம் இருக்காது.

மேலுள்ள அட்டவணையில் இந்தப் பட்டி சேர்க்கப் படவில்லை. நீங்களாகவே
கீழுள்ள வரியைச் சேர்த்து
http://www24.brinkster.com/umarthambi/html_try/view_result.html
வலைப் பக்கத்தில் ஒட்டி சோதியுங்கள்.

<CAPTION ALIGN="middle">My Table</CAPTION>

இனி சில விசேட எழுத்துருக்களைப் பார்ப்போம்.

நாம் இந்தத் தொடரின் தொடக்கத்தில் மீயுரைகுறிமொழியின் பண்புகள் பற்றிப்
பேசும்போது சில விடயங்களைப் பற்றிப் பேசினோம். அதில் ஒன்று, இடைவெளி
பற்றியது. இரு சொற்களுக் கிடையில் எத்தனை இடைவெளி(spaces) தந்தாலும் அது ஒன்றாகவே கணக்கில் கொள்ளப்படும்.

கீழ்க் கண்டதை
http://www24.brinkster.com/umarthambi/html_try/view_result.html
பக்கத்தில் ஒட்டி எப்படித் தோன்றுகிறது என்று பாருங்கள்.

<HTML>
<BODY>
I      have   enough    'spaces'           but no
room for      them    in the    browser!
</BODY>
</HTML>

ஒவ்வொரு சொல்லுக்கும் ஒரு இடைவெளியைத் தவிர மற்றவையெல்லம் மறைந்து
போயிருக்கும். அப்படியானால், கூடுதல் இடைவெளியை எப்படிப் பெறுவது?
அதையும் குறியீடு மூலம்தான் பெற வேண்டும். அதைக் குறிக்க &nbsp; என்று
இடவேண்டும். அவைகளை 'non breaking space" என்கிறோம். அதாவது வரியை
முறிக்காமல் இடைவெளி பெறுவது. இந்த குறியீட்டில் முதலில் வரும் "&" உம் இறுதியில்
வரும் ";" (அரைப் புள்ளி) தேவையான ஒன்றாகும். கீழ்க் கண்டதை மீண்டும் சோதித்துப் பாருங்கள்.

<HTML>
<BODY>
I&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;have&nbsp;&nbsp;&nbsp;enough
&nbsp;&nbsp;but
no&nbsp;&nbsp;&nbsp;room
for&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;them&nbsp;&nbsp;&nbsp;&nbsp;in
the&nbsp;&nbsp;&nbsp;&nbsp;browser!
</BODY>
</HTML>

மேற்கண்டதில் &nbsp; என்பதை தேவையான இடைவெளிகளைப் பெறுவதற்காக
பயன் படுத்தியிருக்கிறோம்.

அதேபோல் < > களுக்கு இடையில் எழுதப் படும் எழுத்துக்கள் உலவியில் தோன்றாது. அப்படியொரு நிலை ஏற்பட்டால் &lt; (lt – lesser than) &gt; (greater than) என்பவைகளை பயன்படுத்த வேண்டும். கீழ்க் கண்டவைகளை சோதித்துப் பாருங்கள்:

<HTML>
<BODY>
<This line is invisible>
&lt; This is visible &gt;
</HTML>
</BODY>

இவ்வாறே, "Copy Right" சின்னத்தைப் பெறுவதற்கு &Copy; என்பதையும்,
"Ampersand" எழுத்துருவைப் பெற &amp; என்பதையும்,
"Registration"  சின்னத்தைப் பெற &reg; என்பதையும் இடவேண்டும்.

குறிப்பு: "Registration"  சின்னத்தின் எழுத்துரு எண்(174) தமிழ் "ஈ" க்காகப் பாவிக்கப் பட்டிருப்பதால் தமிழில் எழுதும்போது "ஈ" தான் கிட்டும். அதைப் போலவே, &trade; (trade mark) எழுத்துருவுக்கு(153) "ஙு" கிட்டும்.

பகுதி 5 ற்குச் செல்ல..