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 attribute indicates that an input field must be filled out before submitting?
required="required" autofocus="autofocus" placeholder="text"
<input type="text" name="name1" required="required" />
Which CSS method increases or decreases the size of the HTML element (including its content)?
translate() scale() skew()
#some_id:hover {
  transform: scale(2, 1.5);
  -ms-transform: scale(2, 1.5);    /* IE 9 */
  -moz-transform: scale(2, 1.5);   /* Firefox */
}
Click on the Date object method that returns the day of the month.
setDate() getMonth() getDate()
var rightnow = new Date();
var day = rightnow.getDate();
alert(day);
Which function is used to upload a file on server?
is_file() move_uploaded_file() fopen()
if(move_uploaded_file($_FILES["field_name"]["tmp_name"], "dir/file_name")) {
  echo "The file succesfully uploaded";
}
Styling HTML table with CSS

Last accessed pages

  1. Display data from PHP Array, or MySQL in HTML table (14212)
  2. Create simple Website with PHP (20530)
  3. PHP-MySQL Tutorials (2840)
  4. Read Excel file data in PHP - PhpExcelReader (60997)
  5. Adding data from HTML Table Rows in Form fields (5647)

Popular pages this month

  1. Insert, Select and Update NULL value in MySQL (409)
  2. Read Excel file data in PHP - PhpExcelReader (329)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (254)
  4. PHP getElementById and getElementsByTagName (205)
  5. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (196)