Skip to main content

How To Create Html Tables

The HTML tables allows to arrange data like text, images, links, other tables, etc. into rows and columns of cells.
1. Tables are defined with the <table> tag.
2. Tables are divided into table rows with the <tr> tag.
3. Table rows are divided into table data with the <td> tag.
4. A table row can also be divided into table headings with the <th>.
Example for HTML Tables :
<!DOCTYPE html>
 <html> 
<head>
 <style> 
table, th, td { border: 1px solid black; border-collapse: collapse; } 
</style> 
</head>
 <body>
 <table style="width:50%">
 <tr>
 <th>Country</th> 
<th>Capital</th> 
</tr> 
<tr> 
<td>Nigeria</td> 
<td> Abuja</td>
 </tr> 
<tr> 
<td>Saudi Arabia</td>
 <td>Makka</td>
 </tr>
 <tr> 
<td>Niger </td>
 <td>Miami</td>
 </tr>
 </table>
 </body> 
</html> 
Table with Cell padding :
Cell padding specifies the space between the cell content and its borders, If not specified a padding, the table cells will be displayed without padding.
Example for Cell Padding :
<!DOCTYPE html>
 <html>
 <head
> <style> 
table, th, td { border: 1px solid black; border-collapse: collapse; }
 th, td { padding: 15px; } 
</style>
 </head> 
<body>
 <table style="width:50%">
 <tr>
 <th>ITEMS</th>
 <th>PRICES</th>
 </tr> 
<tr>
 <td>ORANGE</td>
 <td>$0.4</td>
 </tr> 
<tr>
 <td>APPLE</td>
 <td>$0.6</td>
 </tr>
 <tr>
 <td>MANGO</td>
 <td>$0.3</td>
 </tr>
 </table> 
<p>The cell padding is set to 15px.</p> </body> 
</html> 
TABLE WITH BORDER SPACING :
Border spacing specifies the space between the cells.
Example for Border Spacing :
<!DOCTYPE html>
 <html> 
<head>
<style>
 table, th, td { border: 1px solid black; padding: 5px; } 
table { border-spacing: 15px; }
 </style>
 </head> 
<body>
 <table style="width:50%"> 
<tr> 
<th>Country</th> 
<th>capital</th>
 </tr> 
<tr>
 <td>India</td> 
<td>New delhi</td> 
</tr> 
<tr> 
<td>Germany</td> 
<td>Berlin</td>
 </tr> 
<tr>
 <td>New zealand</td> <td>Wellington</td>
 </tr> 
</table> 
<p> border-spacing is set to 15px.</p> </body> 
</html> 
CELL THAT SPAN MANY COLUMNS :
To make a cell span more than one column, colspan attribute should be used .
Example for Cell that span many columns : 
<!DOCTYPE html>
 <html> 
<head> 
<style>
 table, th, td { border: 1px solid black; border-collapse: collapse; }
 th, td { padding: 5px; text-align: left; }
 </style> 
</head>
 <body> 
<h2>Cell that spans two columns:</h2> <table style="width:100%"> <tr> <th>Name</th>
 <th colspan="2">Telephone</th> 
</tr>
 <tr> 
<td>xyz</td>
 <td>123455...</td>
 <td>abcdef...</td> 
</tr> 
</table> 
</body>
 </html> 
CELL THAT SPAN MANY ROWS:
To make a cell span more than one row, use the rowspan attribute.
Example for cell that span many rows :
<!DOCTYPE html>
 <html>
 <head>
 <style> 
table, th, td { border: 1px solid black; border-collapse: collapse; }
 th, td { padding: 5px; text-align: left; } 
</style> 
</head>
 <body> 
<h2>Cell that spans two rows:</h2> <table style="width:100%"> 
<tr> 
<th>Name:</th>
 <td>xyz</td> 
</tr> 
<tr> 
<th rowspan="2">Telephone:</th> <td>123456...</td>
 </tr> 
<tr> 
<td>abcdef...</td>
 </tr>
 </table> 
</body> 
</html> 
TABLE WITH CAPTION :
To add a caption to a table, use the <caption> tag.
Example for Table with caption :
<!DOCTYPE html>
 <html>
 <head> 
<style>
 table, th, td { border: 1px solid black; border-collapse: collapse; } 
th, td { padding: 5px; text-align: left; } 
</style>
 </head>
 <body>
 <table style="width:50%">
 <caption> CAPITALS </caption> 
<tr>
 <th>Country</th> 
<th>capital</th> 
</tr> 
<tr>
 <td>India</td>
 <td>New delhi</td>
 </tr> 
<tr>
 <td>Germany</td>
 <td>Berlin</td>
 </tr>
 <tr> 
<td>New zealand</td>
 <td>Wellington</td> 
</tr>
 </table>
 </body>
 </html> 
DIFFERENT STYLES FOR DIFFERENT TABLES :
To define a different style for a different table, add an id attribute to the table .
Example for Different Styles :
<!DOCTYPE html>
 <html> 
<head>
 <style>
 table { width:50%; }
 table, th, td { border: 1px solid black; border-collapse: collapse; }
 th, td { padding: 5px; text-align: left; } table#t01 tr:nth-child(even) { background-color: #6B9BC3; } table#t01 tr:nth-child(odd) { background-color:#6DDAD6 ; } table#t01 th { background-color: #6DDAD6 ; color: black; }
 </style>
 </head> 
<body>
 <table id="t01"> 
<tr> 
<th>Nick Name</th> 
<th>First Name</th>
 </tr> 
<tr>
 <td>zunnurrain </td> 
<td>usman</td>
 </tr> 
<tr> 
<td>Amirul muminiin</td>
 <td>Umar</td> 
</tr>
 <tr> 
<td>assidiq</td> 
<td>Abubakar</td>
 </tr>
 </table> 
</body>
 </html> 
TABLE COLOR
To define color for the borders, and the text and background color of elements
Example for Table color :
<!DOCTYPE html>
 <html> 
<head>
 <style>
 table, td, th { border: 1px solid steelblue; }
 th { background-color: #6DDAD6; color: black; } 
</style> 
</head> 
<body>
 <table>
 <tr> 
<th>Nick Name</th> 
<th>First Name</th>
 </tr> 
<tr>
 <td>zunnurrain </td> 
<td>usman</td>
 </tr> 
<tr> 
<td>Amirul muminiin</td>
 <td>Umar</td> 
</tr>
 <tr> 
<td>assidiq</td> 
<td>Abubakar</td>
 </tr>
 </table> 
</body>
 </html> 

To be continue NEXT POST...

Thanks for reading.
 

Labels:

Comments

Post a Comment

Popular posts from this blog

What is Computer?

 The word computer originates from the word compute which means to calculate. It was initially used to refer to human beings that perform calculations. A computer has been defined so many forms by different authors. Some of the definitions are as follows: - Computer :-  is an electronic device that accepts data as input Process the data and gives out information as output.  - Computer :- It can be defined as an electronic or electromechanical device that is capable of accepting data, holds a means of instruction in its memory, process the information given by following sets of instructions to carry out a task without human intervention and at the end provide significant result. - Computer :- is any machine which accepts data and information presented to it in a prescribed form,carry out some operations on the input and supply the required result in a specified format as information or as signals to control some other machines or process. - Computer :- is an ele...
1 comment
Learn more »

System Analysis and Design: A Comprehensive Overview

System analysis and design is a critical phase in the development of software systems. It involves a structured approach to understanding, defining, and designing solutions to meet business needs or address problems. This process ensures that the resulting system is efficient, effective, and aligned with user requirements. Let's delve into the key components and stages of system analysis and design:  1. System Analysis: Understanding Requirements and Problems In this stage, system analysts gather and analyze information to understand the current system or business processes, identify problems, and determine user needs. The goal is to define the scope and objectives of the project.  Requirements Gathering:  Analysts interact with stakeholders to gather requirements, including functional, non-functional, and user-specific needs. Interviews, surveys, observations, and workshops are used to collect detailed information. Problem Identification:  Existing problems, ineffic...
Post a Comment
Learn more »

Algorithm Analysis ,Time and Space Complexities

An algorithm is a step-by-step procedure or set of rules for solving a problem or performing a specific task. Algorithm analysis involves evaluating the efficiency and performance of algorithms, particularly in terms of their time and space complexities.  These complexities provide insights into how an algorithm's runtime and memory requirements grow as the input size increases.  Time Complexity: Time complexity measures the amount of time an algorithm takes to run as a function of the input size. It helps us understand how the algorithm's performance scales with larger inputs. Common notations used to express time complexity include Big O, Big Theta, and Big Omega. - Big O Notation (O()): It represents the upper bound on an algorithm's runtime.  For an algorithm with time complexity O(f(n)), the runtime won't exceed a constant multiple of f(n) for large inputs. -Big Omega Notation (Ω()): It represents the lower bound on an algorithm's runtime.  For an algorithm w...
Post a Comment
Learn more »