[Basic Learning] Make a Table in HTML

Basic Table Creation
Um .., little brass tacks that was very stale. -_-
Well, as we all know The table consists of rows and columns,
and for that, the HTML table creation also is based on rows and columns.

Like valid HTML, always begins with an opening tag, and closed with a closing tag.

for tables,:

  <table> 
  ........... </ Table> 

Well, now to make the rows and columns by using "table row" and "data table".
For HTML tags

  <tr> 
  <td> 
  ....... </ Td> 
  </ Tr> 

where: <tr> is a table row
<td>  is a data table

Here's an example of a simple table:


Their HTML code for the above table is as follows:

  <Table    border = "1"    bgcolor = "cyan"    width = "50%"    height = "50%"    > 
  <tr> <td> Data 1 </ td>    <td> Data 2 </ td>    </ Tr> 
  <tr>    <td> Data 3 </ td>    Data <td> 4 </ td>    </ Tr> 
  </ Table> 

Requirement is making colom and row are,
First we create a table row and table data.
The amount of data tables, which we enter will determine the number of columns in our table.
Here are some tags which are quite often used in the manufacture of tables in HTML.

1. border ------> to make the table border.

   <Table    border = "1"> ............ </ table>  

2. width ------> to set the width of the table

  <Table    width = "50%"> ...... </ table>  

3. height ------> to set the table height

   <Table    height = "50%"> ...... </ table>  

4. bgcolor ------> to set the background color of the table

  <Table    bgcolor = "# DCDCDC"> ..... </ table>  

5. cellspacing -------> to adjust the distance between the cell

  <Table    cellspacing = "1"> ....... </ table>  

6. cellpadding --------> to adjust the distance between the cell contents sell or the data in it.

  <Table    cellpadding = "1"> ........ </ table>  

7. align ------> to adjust the position of the table on the page, there are 4 options: center, left, right, justify

  <Table    align = "center"> ........ </ table>  

8. valign ------> to set the table in a vertical position.

  <Table    valign = "center"> ........ </ table>  

9. backgorund --------> to set the table background using image

  <Table    background = "N3.png"> ........ </ table>  

Colspan use and Rowspan

1.Colspan

Colspan function to combine multiple columns in the table according to the number we want.
and use the tag by adding colspan <td>

  <table>    <tr>    <Td    colspan = "2"> ................. </ td>    </ Tr>    </ Table>  

example


forms the source for the above table is as follows:

  <Table    border = "1"    width = "50%"    height = "50%"    bgcolor = "cyan"> 
  <tr>    <Td    colspan = "2"> My Data </ td>    </ Tr> 
  <tr>    <td> Data 1 </ td>    <td> data 2 </ td>    </ Tr> 
  <tr>    <td> Data 3 </ td>    <td> Data 3 </ td>    </ Tr> 
  </ Table> 

2. Rowspan
Unlike the colspan, rowspan function to combine 2 rows on <td> tag
Format:

  <table> <tr>    <Td    rowspan = "2">    </ Td> ............ </ tr> </ table> 

Example:

for soucenya:

  <Table    border = "1"    width = "50%"    height = "50%"    bgcolor = "cyan"> 
  <tr> <td    rowspan = "2"> my data </ td>    <td> Data 1 </ td>    <td> Data 2 </ td>    </ Tr> 
  <tr>    <td> Data 3 </ td>    Data <td> 4 </ td>    </ Tr> 

Well, That is a basic tutorial on making a simple table. For the next level, we can train together.
Because all begins with intention .... :)


References:
Diktat_Website_Development_IT_DeL.pdf

source link: http://bxcode-rev.blogspot.com