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 defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Styling HTML table with CSS

Last accessed pages

  1. Grouping elements in Stage (534)
  2. Get Attribute (ID, Class, Name, Title, Src) with jQuery (52825)
  3. Ajax-PHP Chat Script (36698)
  4. Node.js Move and Copy file (3780)
  5. Defiing Variables and Constants (1221)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (464)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (405)
  3. Register and show online users and visitors (384)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (302)
  5. Insert, Select and Update NULL value in MySQL (276)