HTML for Begineers | PART : 9

HTML for Begineers | PART  : 9

In this article I’ll be discussing basic part of HTML that a junior (beginner) needs to know. From juniors I mean to all those who are who just passed High School or are of 14 years or above.

HTML Table Example

Number	First Name	Last Name	Points
1.	Siya	Singh	94
2.	Jack	Sharma	80
3.	Aman	Jaiswal	67
4.	Riya	Gupta	50

Defining HTML Tables

·       Tables are defined with the <table> tag.

·       Tables are divided into table rows with the <tr> tag.

·       Table rows are divided into table data with the <td> tag.

·       A table row can also be divided into table headings with the <th> tag.

·       Table data contains all sorts of HTML elements like text, images, lists, other tables, etc.

Example :

<table style="width:50">
  <tr>
    <td> Riya </td>
    <td>Gupta</td> 
    <td>50</td>
  </tr>

<tr>
    <td> Jack </td>
    <td>Sharma</td> 
    <td>80</td>
  </tr>
</table>

An HTML Table with a Border Attribute

·       If you do not specify  border for the table,then it will be displayed without borders.

A border can be added using the border attribute:

EXAMPLE

<table border="1" style="width:100%">
  <tr>
    <td> Riya </td>
    <td>Gupta</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Siya</td>
    <td>Singh</td> 
    <td>94</td>
  </tr>
</table>

To add borders, use the CSS border property:

EXAMPLE

table, th, td {
    border: 1px solid black;

}

·       Remember to define borders for both the table and the table cells.

---

An HTML Table with Collapsed Borders

If you want the borders to collapse into one border, then add CSS border-collapse:

Example

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

An HTML Table with Cell Padding

·       Cell padding is define as 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:

Example

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
}

HTML Table Headings

·       Table headings are defined with the <th> tag.

By default, all major browsers display table headings as bold and centered:

Example

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Points</th>
  </tr>
  <tr>
    <td>Siya</td>
    <td>Singh</td> 
    <td>94</td>
  </tr>
</table>

To left-align the table headings, use the CSS text-align property:

Example

th {
    text-align: left;
}

An HTML Table with Border Spacing

·       Border spacing is defined as the space between the cells.

To set the border spacing for a table, use the CSS border-spacing property:

Example

table {
    border-spacing: 5px;
}

·       If the table has collapsed borders,then border-spacing has no effect.

To make  cell span more than one column, use  colspan attribute:

Example

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>

Table Cells that Span Many Rows

To make  cell span more than one row, use  rowspan attribute:

Example

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
</table>

An HTML Table With a Caption

To add a caption to a table, use the <caption> tag:

Example

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

·       The <caption> tag must be inserted immediately after the <table> tag.

---

A Special Style for One Table

To define a special style for a special table, add an <id> attribute to the table:

Example

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Points</th>
  </tr>
  <tr>
    <td>Siya</td>
    <td>Singh</td> 
    <td>94</td>
  </tr>
</table>

Now you can define special style for this table:

table#t01 {
    width: 100%; 
    background-color: #f1f1c1;
}

And add more styles:

table#t01 tr:nth-child(Siyan) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#t01 th {
    color: white;
    background-color: black;
}

Chapter Summary

• Use  HTML <table> tag to define a table.
• Use  HTML <tr>  tag to define a table row.
• Use  HTML <td> tag to define a table data.
• Use  HTML <th> tag to define a table heading.
• Use  HTML <caption> tag to define a table caption.
• Use  CSS border property to define a border.
• Use  CSS border-collapse property to collapse cell borders.
• Use  CSS padding property to add padding to cells.
• Use  CSS text-align property to align cell text.
• Use  CSS border-spacing property to set the spacing between cells.
• Use colspan attribute to make a cell span many columns.
• Use  rowspan attribute to make a cell span many rows.
• Use  id attribute to uniquely define one table.

 For more visit my site "http://imshresthi.blogspot.in/"

Enable GingerCannot connect to Ginger Check your internet connection
or reload the browserDisable in this text fieldEditEdit in GingerEdit in Ginger×