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 is a block element?
<div> <img> <span>
<div>Web Programming and Development</div>
Which CSS code displays the text underlined?
font-style: italic; text-decoration: underline; font-weight: 500;
h2 {
  text-decoration: underline;
}
Click on the JavaScript function that can access other function after a specified time.
insertBefore() setTimeout() querySelector()
function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);
Click on the instruction that returns the number of items of a multidimensional array in PHP.
count($array) count($array, 1) strlen()
$food =["fruits" =>["banana", "apple"), "veggie" =>["collard", "pea"));
$nr_food = count($food, 1);
echo $nr_food;       // 6
Styling HTML table with CSS

Last accessed pages

  1. Contact page - CoursesWeb (11442)
  2. Tabs effect with CSS (12143)
  3. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (18069)
  4. Create a simple anti-spam Captcha verification code (1403)
  5. ActionScript 3 - Change MovieClip Color (6360)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2470)
  2. Contact page - CoursesWeb (2397)
  3. Tabs effect with CSS (2391)
  4. Insert, Select and Update NULL value in MySQL (1510)
  5. PHP getElementById and getElementsByTagName (934)