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>

<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>
Result:
Title 1 Title 2
Row 2 - Column 1 Row 2 - Column 2
Row 3 - Column 1 Row 3 - Column 2
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>

<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>
Result:
Title 1 Title 2
Row 2 - Column 1 Row 2 - Column 2
Row 3 - Column 1 Row 3 - Column 2
If you only want a border around the table, apply the "border" 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>

<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>
Result:
Title 1 Title 2
Row 2 - Column 1 Row 2 - Column 2
Row 3 - Column 1 Row 3 - Column 2
 

Aligning in the 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>
Result:
Title 1 Title 2
Row 2 - Column 1 Row 2 - Column 2
Row 3 - Column 1 Row 3 - Column 2
 

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>

<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>
Result:
Title 1 Title 2
Row 2 - Column 1 Row 2 - Column 2
Row 3 - Column 1 Row 3 - Column 2
 

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>

<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>
Result:
Title 1 Title 2
Row 2 - Column 1 Row 2 - Column 2
Row 3 - Column 1 Row 3 - Column 2
 

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: #efefef;
}
tr:hover {
 background: #b8d8b8;
}
th {
 background: #bbbbf0;
}
</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>
<tr>
 <td>linia 4- coloana 1</td>
 <td>linia 4- coloana 2</td>
</tr>
</table>
Result (move the mouse cursor on rows):
Title 1 Title 2
Row 2 - Column 1 Row 2 - Column 2
Row 3 - Column 1 Row 3 - Column 2
linia 4- coloana 1 linia 4- coloana 2

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Styling HTML table with CSS

Last accessed pages

  1. Get CSS property value with JavaScript /jQuery (2942)
  2. JavaScript strip_tags and stripslashes (3231)
  3. Draw arrow markers between clicks coords in Canvas (619)
  4. Extract a number of characters and words from text (547)
  5. Get and Modify content of an Iframe (12628)

Popular pages this month

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