About US

User Account

Other

Defining An HTML Table And Attribute

Description

The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells.

The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by default

Example

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Tables</title>
   </head>
	
   <body>
      <table border = "1">
         <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
         </tr>
         
         <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
         </tr>
      </table>
      
   </body>
</html>

This will produce the following result −

 

Here, the border is an attribute of <table> tag and it is used to put a border across all the cells. If you do not need a border, then you can use border = "0".

HTML Table - Adding a Border

If 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 Table - Collapsed Borders

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

Example

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

 

 

HTML Table - Adding Cell Padding

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:

Example

th, td {
    padding: 15px;
}

 


HTML Table - Left-align Headings

By default, table headings are bold and centered.

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

Example

th {
    text-align: left;
}

 


HTML Table - Adding Border Spacing

Border spacing specifies the space between the cells.

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

Example

table {
    border-spacing: 5px;
}

 

Note: If the table has collapsed borders, border-spacing has no effect.


HTML Table - Cells that Span Many Columns

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

Example

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

 

 

HTML Table - Cells that Span Many Rows

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

Example

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

 


HTML Table - Adding 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>

 

Note: 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>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Now you can define a special style for this table:

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

 

And add more styles:

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

 

Keywords

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

Write Reviews



Related Topics

by : Admin


42    0   

by : Admin


35    0   

by : Admin


92    0   

by : Admin


32    0   

by : Admin


167    0   

by : Admin


73    0   

Get a new website now!!

Getting a website for your small or large business is an essential way of making it grow globally.

Copyrights © 2018 Dreamsmolder.com. All rights reserved.