In HTML5 the style, alignment and tables design is made with CSS.
- How to create tables in html is shown in the tutorial: HTML Tables.


The <style> tag from the examples presented in this tutorial must be added in the <head> are of the webpage.


Adding border to table

To add a border to table use the border css property.
- Example, border added to: <table>, <th>, and <td>:

<style>
table, th, td {
 border: 1px solid #000;
}
</style>

<h4>Simple border to table elements</h4>
<table>
<tr>
 <th>Title 1</th>
 <th>Title 2</th>
</tr>
<tr>
 <td>Row 2 - Column 1</td>
 <td>Row 2 - Column 2</td>
</tr>
<tr>
 <td>Row 3 - Column 1</td>
 <td>Row 3 - Column 2</td>
</tr>
</table>

Notice that the table in the example above has double borders. This is because the table and the <th> and <td> elements have separate borders. To collapse the borders into a single border apply this css property: border-collapse: collapse; to table.

- The same example with 'border-collapse'.

<style>
table {
 border-collapse: collapse;
}
table, th, td {
 border: 1px solid #000;
}
</style>

<h4>Table with border-collapse</h4>
<table>
<tr>
 <th>Title 1</th>
 <th>Title 2</th>
</tr>
<tr>
 <td>Row 2 - Column 1</td>
 <td>Row 2 - Column 2</td>
</tr>
<tr>
 <td>Row 3 - Column 1</td>
 <td>Row 3 - Column 2</td>
</tr>
</table>
If you only want a border around the table, apply the 'border' property to <table>.

Table Width and Height

Width and height of a table are defined by the width and height css properties.
- Example: Table with 95% width, and 40px height for <th>:

<style>
table {
 border-collapse: collapse;
 width: 95%;
}
th {
 height: 40px;
}
table, th, td {
 border: 1px solid #000;
}
</style>

<h4>Table with 95% width, and 40px height for TH</h4>
<table>
<tr>
 <th>Title 1</th>
 <th>Title 2</th>
</tr>
<tr>
 <td>Row 2 - Column 1</td>
 <td>Row 2 - Column 2</td>
</tr>
<tr>
 <td>Row 3 - Column 1</td>
 <td>Row 3 - Column 2</td>
</tr>
</table>

Aligning content in HTML table

The text-align property sets the horizontal alignment (left, right, or center) of the content in <th> or <td>.
- By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.
The vertical-align property sets the vertical alignment (top, bottom, or middle) of the content in <th> or <td> (by default, the vertical alignment of the content in a table is middle).

To center horizontally a table in page, set 'auto' value to left and right margins of the table: margin:5px auto;


- Example: Table centered, the content in <th> set to left, and the content in <td> set to bottom:
<style>
table {
 border-collapse: collapse;
 margin:5px auto;
 width: 70%;
}
table, th, td {
 border: 1px solid #000;
}
th {
 text-align: left;
}
td {
 height: 45px;
 vertical-align: bottom;
}
</style>

<table>
<tr>
 <th>Title 1</th>
 <th>Title 2</th>
</tr>
<tr>
 <td>Row 2 - Column 1</td>
 <td>Row 2 - Column 2</td>
</tr>
<tr>
 <td>Row 3 - Column 1</td>
 <td>Row 3 - Column 2</td>
</tr>
</table>

Table Padding

To control the space between the table cells, use the border-spacing property on <table>.
To control the space between the border and the content in a table, use the padding property on <th> and <td>.


- Example: Space between cells set to 10px and padding 8px:
<style>
table {
 border-spacing:10px;
 margin:5px auto;
 width: 80%;
}
table, th, td {
 border: 1px solid #000;
}
th, td {
 padding: 8px;
}
</style>

<h4>Example table padding</h4>
<table>
<tr>
 <th>Title 1</th>
 <th>Title 2</th>
</tr>
<tr>
 <td>Row 2 - Column 1</td>
 <td>Row 2 - Column 2</td>
</tr>
<tr>
 <td>Row 3 - Column 1</td>
 <td>Row 3 - Column 2</td>
</tr>
</table>

HTML Table Color

The background property can be used to set background color for <table>, <tr>, <th> and <td>.
- Example: background set to <table>, <th> and <td>.

<style>
table {
 background: #a8a9e0;
 margin:5px auto;
 width: 290px;
}
table, th, td {
 border: 1px solid #000;
}
th {
 background: #4bac40;
 color: #fff;
}
td {
 background: #fff;
}
</style>

<h4>Example background color in table</h4>
<table>
<tr>
 <th>Title 1</th>
 <th>Title 2</th>
</tr>
<tr>
 <td>Row 2 - Column 1</td>
 <td>Row 2 - Column 2</td>
</tr>
<tr>
 <td>Row 3 - Column 1</td>
 <td>Row 3 - Column 2</td>
</tr>
</table>

Zebra-striped tables

To alternate the rows color, use the nth-child() selector, and the 'background' property to all even (or odd) <tr>.
To highlight table rows on mouse over, use the hover selector to <tr>.


- Example:
<style>
table {
 border-collapse: collapse;
 margin:5px auto;
 width: 290px;
}
table, th, td {
 border: 1px solid #000;
}
tr:nth-child(even){
 background: #dedede;
}
tr:hover {
 background: #90de90;
}
th {
 background: #bbbbf0;
}
</style>

<h4>Example zebra-striped tables</h4>
<p>Move the mouse cursor over rows.</p>
<table>
<tr>
 <th>Title 1</th>
 <th>Title 2</th>
</tr>
<tr>
 <td>Row 2 - Column 1</td>
 <td>Row 2 - Column 2</td>
</tr>
<tr>
 <td>Row 3 - Column 1</td>
 <td>Row 3 - Column 2</td>
</tr>
<tr>
 <td>linia 4- coloana 1</td>
 <td>linia 4- coloana 2</td>
</tr>
</table>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag adds an image in web page?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
}
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
}
Styling HTML table with CSS

Last accessed pages

  1. Break and Continue (1741)
  2. SimpleModal Dialog Windows (1475)
  3. Working with HTML attributes in PHP (7975)
  4. Adding data from HTML Table Rows in Form fields (6341)
  5. JavaScript trim, rtrim and ltrim (6303)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2406)
  2. Contact page - CoursesWeb (2308)
  3. Tabs effect with CSS (2296)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (904)
  5. PHP getElementById and getElementsByTagName (854)