SlideShare a Scribd company logo
1 of 10
The obvious purpose of arranging information in a table
The less obvious - but more widely used - purpose of
creating a page layout with the use of hidden tables.
Using tables to divide the page into different sections is an
extremely powerful tool.
Almost all major sites on the web are using invisible tables
to layout the pages.
The most important layout aspects that can be done with
tables are:
Dividing the page into separate sections.
An invisible table is excellent for this purpose.
Creating menus.
Typically with one color for the header and another for the
links following in the next lines.
you do not specify a border for
the table, it will be displayed
without borders.
A border is set using the
CSS border property:
<html>
<head>
<table style="width:100%">
<tr>
<th>First name</th>
<th>Last name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Firstname LastName Age
Jill Smith 50
Eve Jackson 94
John Deo 80
Cell padding specifies the space between the
cell content and its borders.
If you do not specify a padding, the table cells
will be displayed without padding.
To set the padding, use the
CSS padding property:
By default, table headings are bold and
centered.
To left-align the table headings, use the
CSS text-align property:
TABLE
TABLE
TABLE
TABLE

More Related Content

Similar to TABLE

Static web sites assignment 1 philip lemmon1
Static web sites assignment 1 philip lemmon1Static web sites assignment 1 philip lemmon1
Static web sites assignment 1 philip lemmon1
Lemmon12
 
Adding tables to your web page
Adding tables to your web pageAdding tables to your web page
Adding tables to your web page
cachs_computing
 

Similar to TABLE (20)

CSUN 2020: CSS Display Properties Versus HTML Semantics
CSUN 2020: CSS Display Properties Versus HTML SemanticsCSUN 2020: CSS Display Properties Versus HTML Semantics
CSUN 2020: CSS Display Properties Versus HTML Semantics
 
Static web sites assignment 1 philip lemmon1
Static web sites assignment 1 philip lemmon1Static web sites assignment 1 philip lemmon1
Static web sites assignment 1 philip lemmon1
 
Web I - 03 - Tables
Web I - 03 - TablesWeb I - 03 - Tables
Web I - 03 - Tables
 
Html table tags
Html table tagsHtml table tags
Html table tags
 
Session on common html table
Session on common html tableSession on common html table
Session on common html table
 
WEP4 and 5.pptx
WEP4 and 5.pptxWEP4 and 5.pptx
WEP4 and 5.pptx
 
Tybscrc
TybscrcTybscrc
Tybscrc
 
Html html html html html html html html html
Html html html html html html html html htmlHtml html html html html html html html html
Html html html html html html html html html
 
IP - Lecture 6, 7 Chapter-3 (3).ppt
IP - Lecture 6, 7 Chapter-3 (3).pptIP - Lecture 6, 7 Chapter-3 (3).ppt
IP - Lecture 6, 7 Chapter-3 (3).ppt
 
29042023.pptx
29042023.pptx29042023.pptx
29042023.pptx
 
Adding tables to your web page
Adding tables to your web pageAdding tables to your web page
Adding tables to your web page
 
Lecture 5 html table
Lecture 5 html tableLecture 5 html table
Lecture 5 html table
 
v4-html-table-210321161424.pptx
v4-html-table-210321161424.pptxv4-html-table-210321161424.pptx
v4-html-table-210321161424.pptx
 
CSS
CSSCSS
CSS
 
Html Styles-CSS
Html Styles-CSSHtml Styles-CSS
Html Styles-CSS
 
html-table
html-tablehtml-table
html-table
 
Web Programming-css.pptx
Web Programming-css.pptxWeb Programming-css.pptx
Web Programming-css.pptx
 
CSS HTML.pdf
CSS HTML.pdfCSS HTML.pdf
CSS HTML.pdf
 
Chapter 3 - CSS.pdf
Chapter 3 - CSS.pdfChapter 3 - CSS.pdf
Chapter 3 - CSS.pdf
 
Chapter 4 class presentation
Chapter 4 class presentationChapter 4 class presentation
Chapter 4 class presentation
 

Recently uploaded

Seizure stage detection of epileptic seizure using convolutional neural networks
Seizure stage detection of epileptic seizure using convolutional neural networksSeizure stage detection of epileptic seizure using convolutional neural networks
Seizure stage detection of epileptic seizure using convolutional neural networks
IJECEIAES
 
Final DBMS Manual (2).pdf final lab manual
Final DBMS Manual (2).pdf final lab manualFinal DBMS Manual (2).pdf final lab manual
Final DBMS Manual (2).pdf final lab manual
BalamuruganV28
 
Tembisa Central Terminating Pills +27838792658 PHOMOLONG Top Abortion Pills F...
Tembisa Central Terminating Pills +27838792658 PHOMOLONG Top Abortion Pills F...Tembisa Central Terminating Pills +27838792658 PHOMOLONG Top Abortion Pills F...
Tembisa Central Terminating Pills +27838792658 PHOMOLONG Top Abortion Pills F...
drjose256
 
electrical installation and maintenance.
electrical installation and maintenance.electrical installation and maintenance.
electrical installation and maintenance.
benjamincojr
 

Recently uploaded (20)

Seismic Hazard Assessment Software in Python by Prof. Dr. Costas Sachpazis
Seismic Hazard Assessment Software in Python by Prof. Dr. Costas SachpazisSeismic Hazard Assessment Software in Python by Prof. Dr. Costas Sachpazis
Seismic Hazard Assessment Software in Python by Prof. Dr. Costas Sachpazis
 
Working Principle of Echo Sounder and Doppler Effect.pdf
Working Principle of Echo Sounder and Doppler Effect.pdfWorking Principle of Echo Sounder and Doppler Effect.pdf
Working Principle of Echo Sounder and Doppler Effect.pdf
 
Theory of Time 2024 (Universal Theory for Everything)
Theory of Time 2024 (Universal Theory for Everything)Theory of Time 2024 (Universal Theory for Everything)
Theory of Time 2024 (Universal Theory for Everything)
 
Seizure stage detection of epileptic seizure using convolutional neural networks
Seizure stage detection of epileptic seizure using convolutional neural networksSeizure stage detection of epileptic seizure using convolutional neural networks
Seizure stage detection of epileptic seizure using convolutional neural networks
 
CLOUD COMPUTING SERVICES - Cloud Reference Modal
CLOUD COMPUTING SERVICES - Cloud Reference ModalCLOUD COMPUTING SERVICES - Cloud Reference Modal
CLOUD COMPUTING SERVICES - Cloud Reference Modal
 
Raashid final report on Embedded Systems
Raashid final report on Embedded SystemsRaashid final report on Embedded Systems
Raashid final report on Embedded Systems
 
NEWLETTER FRANCE HELICES/ SDS SURFACE DRIVES - MAY 2024
NEWLETTER FRANCE HELICES/ SDS SURFACE DRIVES - MAY 2024NEWLETTER FRANCE HELICES/ SDS SURFACE DRIVES - MAY 2024
NEWLETTER FRANCE HELICES/ SDS SURFACE DRIVES - MAY 2024
 
SLIDESHARE PPT-DECISION MAKING METHODS.pptx
SLIDESHARE PPT-DECISION MAKING METHODS.pptxSLIDESHARE PPT-DECISION MAKING METHODS.pptx
SLIDESHARE PPT-DECISION MAKING METHODS.pptx
 
Final DBMS Manual (2).pdf final lab manual
Final DBMS Manual (2).pdf final lab manualFinal DBMS Manual (2).pdf final lab manual
Final DBMS Manual (2).pdf final lab manual
 
Circuit Breakers for Engineering Students
Circuit Breakers for Engineering StudentsCircuit Breakers for Engineering Students
Circuit Breakers for Engineering Students
 
21scheme vtu syllabus of visveraya technological university
21scheme vtu syllabus of visveraya technological university21scheme vtu syllabus of visveraya technological university
21scheme vtu syllabus of visveraya technological university
 
Tembisa Central Terminating Pills +27838792658 PHOMOLONG Top Abortion Pills F...
Tembisa Central Terminating Pills +27838792658 PHOMOLONG Top Abortion Pills F...Tembisa Central Terminating Pills +27838792658 PHOMOLONG Top Abortion Pills F...
Tembisa Central Terminating Pills +27838792658 PHOMOLONG Top Abortion Pills F...
 
electrical installation and maintenance.
electrical installation and maintenance.electrical installation and maintenance.
electrical installation and maintenance.
 
handbook on reinforce concrete and detailing
handbook on reinforce concrete and detailinghandbook on reinforce concrete and detailing
handbook on reinforce concrete and detailing
 
Maximizing Incident Investigation Efficacy in Oil & Gas: Techniques and Tools
Maximizing Incident Investigation Efficacy in Oil & Gas: Techniques and ToolsMaximizing Incident Investigation Efficacy in Oil & Gas: Techniques and Tools
Maximizing Incident Investigation Efficacy in Oil & Gas: Techniques and Tools
 
Research Methodolgy & Intellectual Property Rights Series 1
Research Methodolgy & Intellectual Property Rights Series 1Research Methodolgy & Intellectual Property Rights Series 1
Research Methodolgy & Intellectual Property Rights Series 1
 
8th International Conference on Soft Computing, Mathematics and Control (SMC ...
8th International Conference on Soft Computing, Mathematics and Control (SMC ...8th International Conference on Soft Computing, Mathematics and Control (SMC ...
8th International Conference on Soft Computing, Mathematics and Control (SMC ...
 
UNIT-2 image enhancement.pdf Image Processing Unit 2 AKTU
UNIT-2 image enhancement.pdf Image Processing Unit 2 AKTUUNIT-2 image enhancement.pdf Image Processing Unit 2 AKTU
UNIT-2 image enhancement.pdf Image Processing Unit 2 AKTU
 
History of Indian Railways - the story of Growth & Modernization
History of Indian Railways - the story of Growth & ModernizationHistory of Indian Railways - the story of Growth & Modernization
History of Indian Railways - the story of Growth & Modernization
 
Independent Solar-Powered Electric Vehicle Charging Station
Independent Solar-Powered Electric Vehicle Charging StationIndependent Solar-Powered Electric Vehicle Charging Station
Independent Solar-Powered Electric Vehicle Charging Station
 

TABLE

  • 1.
  • 2. The obvious purpose of arranging information in a table The less obvious - but more widely used - purpose of creating a page layout with the use of hidden tables. Using tables to divide the page into different sections is an extremely powerful tool. Almost all major sites on the web are using invisible tables to layout the pages. The most important layout aspects that can be done with tables are: Dividing the page into separate sections. An invisible table is excellent for this purpose. Creating menus. Typically with one color for the header and another for the links following in the next lines.
  • 3. you do not specify a border for the table, it will be displayed without borders. A border is set using the CSS border property:
  • 4. <html> <head> <table style="width:100%"> <tr> <th>First name</th> <th>Last name</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </body> </html> Firstname LastName Age Jill Smith 50 Eve Jackson 94 John Deo 80
  • 5. Cell padding specifies the space between the cell content and its borders. If you do not specify a padding, the table cells will be displayed without padding. To set the padding, use the CSS padding property:
  • 6. By default, table headings are bold and centered. To left-align the table headings, use the CSS text-align property: