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.
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>
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>
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;
<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>
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>.
<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>
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>
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>.
<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>
<p>Web development courses: <em>CoursesWeb.net</em></p>
h3 {
padding: 2px 0.2em;
}// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);if(isset($_POST["field"])) {
echo $_POST["field"];
}