Theory
તમારા Portfolio માં Gridlock
તમારે તમારી portfolio ની website પર તમારા ટોચના ત્રણ college ના projects દેખાડવા છે. તમારે project નાં નામ, તમે એ કયા semester માં બનાવ્યાં, અને તમારા અંતિમ grades પડખોપડખ દેખાડવા છે. પણ જ્યારે તમે એ સામાન્ય લખાણનાં tags વાપરીને ટાઈપ કરો, એ અસ્તવ્યસ્ત રીતે ગોઠવાય છે, અવ્યવસ્થિત અને ગૂંચવનારું દેખાતાં. તમારી site ની મુલાકાત લેતો recruiter નામોને grades સાથે ગોઠવી શકતો નથી. તો આપણે આ સંરચિત માહિતીને સાફ આડી rows અને ઊભા columns માં કેવી રીતે સુઘડ રીતે બેસાડીએ જે સંપૂર્ણપણે વ્યાવસાયિક દેખાય?
Theory
Graph Paper ની નોટબુક
ગણિત માટે graph paper ની નોટબુક વાપરતા તમારા શાળાના દિવસો યાદ કરો. જ્યારે તમે એક ચાર્ટ દોરો, તમે પહેલેથી છપાયેલાં grid નાં ખાનાં વાપરો છો. દરેક અલગ ખાનું એક આંકડો રાખે છે, અને દરેક આડી લીટી એક પૂરો record દર્શાવે છે. જો તમને પહોળી નામની હરોળ જોઈએ તો તમે પડખેનાં ખાનાં જોડી પણ શકો છો. એક HTML table બિલકુલ graph paper ની જેમ કામ કરે છે. એ એક કડક સંરચનાત્મક જાળી બનાવે છે જ્યાં content જગ્યાએથી ખસી શકતું નથી, તમારા grid ને નિર્દોષ રીતે ગોઠવાયેલો રાખતાં.
Theory
એક HTML Table નું શરીરરચનાશાસ્ત્ર
Web engineering માં, એક HTML table એ એક element છે જે data ને grid ના સ્વરૂપમાં દેખાડવા વપરાય છે. એ બહારના <table> tag ના ડબ્બા વાપરીને બનાવાય છે. આ ડબ્બાની અંદર, દરેક અલગ હરોળ <tr> (table row) tag વાપરીને શરૂ થાય છે. એક હરોળની અંદર, તમે અલગ ખાનાં કાં તો bold વચ્ચે ગોઠવાયેલાં નામો માટે <th> (table header) કાં તો સામાન્ય લખાણનાં ખાનાં માટે <td> (table data) વાપરીને વ્યાખ્યાયિત કરો છો. તમે table ખોલ્યા પછી તરત એક title તરીકે કામ કરવા એક વૈકલ્પિક <caption> tag પણ નિર્દિષ્ટ કરી શકો છો.
At a glance
Data ના grids જોડવા વપરાતાં મુખ્ય HTML elements.
| Tag | હેતુ | Default દૃશ્ય વર્તન |
|---|---|---|
| <table> | આખા grid ના layout માટે મુખ્ય બહારનું વીંટાળનાર | Borders વગર અદૃશ્ય સીમાઓ |
| <caption> | Grid ની ઉપર એક પહોંચી શકાય એવું title આપે છે | બિલકુલ ટોચે વચ્ચે ગોઠવાયેલું લખાણ |
| <tr> | ખાનાં માટે એક આડો ડબ્બો જાહેર કરે છે | એક block સ્તરના લીટી તોડનાર જેવું કામ કરે છે |
| <th> | એક હરોળની અંદર અગ્રણી column નાં મથાળાં બનાવે છે | Bold લખાણ અને આપોઆપ વચ્ચે ગોઠવાયેલું |
| <td> | Data ની values રાખતું એક standard data નું ખાનું બનાવે છે | સામાન્ય ડાબે ગોઠવાયેલું લખાણનું content |
Practical
A Standard Projects Grid Layout
<table width="100%" height="150">
<caption>My Semester Projects</caption>
<tr>
<th>Project Name</th>
<th>Semester</th>
<th>Grade</th>
</tr>
<tr>
<td>Portfolio Site</td>
<td>Semester 2</td>
<td>A+</td>
</tr>
<tr>
<td>Library App</td>
<td>Semester 1</td>
<td>A</td>
</tr>
</table>This example runs in Gri-Learn on the web, where you can edit it and see the output.
Theory
જગ્યાનાં નિયંત્રણો અને ખાનાં જોડવાં
તમારા grid ની રજૂઆત સુધારવા, તમારે જગ્યા અને જોડાણ પર પ્રભુત્વ મેળવવું પડશે. cellpadding attribute આંતરિક જગ્યા નિયંત્રિત કરે છે: એક ખાનાની સીમા અને એની અંદરના લખાણ વચ્ચેનું અંતર. cellspacing attribute બહારની જગ્યા નક્કી કરે છે: પડખેનાં ખાનાંની સીમાઓ વચ્ચેની ખાલી જગ્યા. જ્યારે તમારે ખાનાં જોડવાં હોય, ત્યારે એક જ ખાનાને અનેક columns પર આડું ખેંચવા colspan વાપરો, કે એક ખાનાને અનેક rows પર ઊભું નીચે ખેંચવા rowspan વાપરો.
Quiz
તમે એક lab ના assignment માટે નાણાકીય report નું table બનાવી રહ્યા છો અને તમારે તળિયાની હરોળમાં એક જ 'Total Expenses' ના label નું ખાનું બિલકુલ ત્રણ columns પર ફેલાવવું છે. કયું attribute નું જોડાણ માન્ય છે?
- <td rowspan="3">
- <td colspan="3">
- <td size="3">
- <td width="300%">
Show the answer
<td colspan="3">
colspan attribute એક ખાનાને columns પર આડું ફેલાવે છે, જે colspan="3" ને ત્રણ columns જોડવા માટે સાચી પસંદગી બનાવે છે. rowspan ખાનાંને rows પર ઊભાં નીચે જોડે છે, જે અહીં હરોળનો પ્રવાહ બગાડી નાખશે.
Think first
જગ્યા અને Padding ના વર્તનની આગાહી
મનમાં એવું table તપાસો જ્યાં લખાણ ખાનાંની grid ની સીમાઓને ચુસ્ત ચોંટેલું છે, પણ grid નાં ખોખાં વચ્ચે મોટી સફેદ ખાલી જગ્યાઓ છે. તમે આ કેવી રીતે સુધારો? Tap કરતાં પહેલાં વિચારો.
Show the answer
તમારે ખાનાંની દીવાલોને અંદરના લખાણથી દૂર ધકેલવા cellpadding attribute ની value વધારવી પડશે, આંતરિક શ્વાસ લેવાની જગ્યા બનાવતાં. સાથે જ, તમારે ખાનાંની સીમાઓ વચ્ચેની ખાલી જગ્યાઓ ઘટાડવા અને grid નાં ખોખાં નજીક ખેંચવા cellspacing attribute ની value ઘટાડવી પડશે.
Watch out
તૂટેલા તરતા ખાનાનો ફાંદો
University ની semester ની વ્યવહારુ પરીક્ષાઓમાં એક નિર્ણાયક ભૂલ છે rows પર ખાનાંની ગણતરી ન મેળવવી. જો તમારી header ની હરોળમાં ત્રણ <th> tags હોય, પણ તમારી data ની હરોળમાં માત્ર બે <td> tags હોય, browser લીટીના છેડે એક કદરૂપું ખાલી પોલાણ દોરે છે. યાદ રાખો: જો તમે એક જ ખાના પર colspan="2" વાપરો, એ ખાનું એ હરોળના કુલ ખાનાંની ફાળવણીમાં 2 તરીકે ગણાય છે. હંમેશા ખાતરી કરો કે દરેકે દરેક હરોળનો સરવાળો એકસરખો થાય!
Formula
Exam ના જવાબની રીત: સલામત Table બનાવવું
જ્યારે એક theory નો પ્રશ્ન તમને એક જટિલ grid ના layout માટે code લખવાનું કહે, પૂરા marks માટે આ ક્રમબદ્ધ પગલાં ચલાવો:
- મુખ્ય
<table>નું વીંટાળનાર ખોલો અને તરત એક<caption>નાખો. - Column ના મથાળાં માટે
<th>tags સાથે<tr>વાપરીને તમારી પહેલી હરોળ બનાવો. - મળતાં
<tr>અને<td>ના ડબ્બા વાપરીને data ની rows ક્રમશઃ ભરો. - જો ખાનાં જોડાતાં હોય તો tags ની અંદર સ્પષ્ટ
rowspanકેcolspanmodifiers જડો. - Elements ને સંરચનાત્મક ક્રમમાં સાફ રીતે બંધ કરો: data નું ખાનું બંધ કરો, હરોળ બંધ કરો, પછી table બંધ કરો.
Summary
Key takeaways
<table>tag માતાપિતાના ડબ્બા તરીકે કામ કરે છે, જ્યારે<caption>ઉપર એક વર્ણન ગોઠવે છે.- Rows
<tr>થી બને છે, જેમાં મથાળાં માટે<th>અને સંરચનાત્મક data નાં ખાનાં માટે<td>હોય છે. - Cellpadding આંતરિક padding ની જગ્યા ગોઠવે છે, જ્યારે cellspacing બહારની સીમાની જગ્યા નિયંત્રિત કરે છે.
- Colspan પડખેનાં ખાનાં columns પર જોડે છે, જ્યારે rowspan એક ખાનાને rows પર નીચે લંબાવે છે.
- સંરચનાત્મક અખંડિતતા જાળવવા દરેક હરોળે સ્પષ્ટપણે એકસરખી કુલ ખાનાંની ગણતરીનો હિસાબ રાખવો પડે.
- Memory Hook: Rows પહોળી જાય, columns ઊંડા જાય, દરેક ખાનું ગણો નહીંતર તમારું grid નું માળખું રડશે.