AgerNic.com/ro
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
Tutorial

Tabele CSS


Next Page >>
HTML images

CSS Tutorial » Tabele CSS

Tabelele sunt utilizate în mod obișnuit pentru a afișa date tabulare, cum ar fi rapoartele financiare.

Dar când creați un tabel HTML fără stiluri sau atribute, browserele îl afișează fără margini. Cu CSS puteți îmbunătăți foarte mult aspectul tabelelor dvs.

CSS oferă mai multe proprietăți care vă permit să controlați aspectul și prezentarea elementelor tabelei. În secțiunea următoare, veți vedea cum să utilizați CSS pentru a crea tabele elegante și consistente.

ID Prenume Nume E-mail
1 Clark Kent [email protected]
2 John Carter [email protected]
3 Peter Parker [email protected]

 

Adăugați chenare la tabele

Proprietatea de chenar CSS este cel mai bun mod de a defini chenarele tabelului.

Următorul exemplu va seta o margine neagră pentru elementele <table>, <th> si <td>.

Exemplu
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="utf-8">
<title>Exemplu de configurare a chenarului tabelului</title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Prenume</th>
<th>Nume</th>
<th>E-mail</th>
</tr>
<tr>
<td>1</td>
<td>Maria</td>
<td>Carter</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>Petro</td>
<td>Parker</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>Iony</td>
<td>Rambo</td>
<td>[email protected]</td>
</tr>
<tr>
<td>4</td>
<td>Harryson</td>
<td>Potter</td>
<td>[email protected]</td>
</tr>
</table>
</body>
</html>

Etichete: exemple tabele CSS, drăguțe, receptive, șabloane pentru tabele CSS in HTML, machete, stiluri, tabele CSS stilizate si elegante,

 

Collapse (Reduceți) marginile tabelului

Există două modele diferite pentru setarea chenarelor în celulele tabelelor din CSS: împărțire și colapsare.

În modelul de chenar separat, care este implicit, fiecare celulă din tabel are propriile borduri distincte, în timp ce în modelul de chenar restrâns, celulele de tabel adiacente au un chenar comun. Puteți seta modelul de chenar pentru un tabel HTML folosind proprietatea CSS de colapsare a chenarului.

Exemple
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="utf-8">
<title>Exemplu de fuzionare a marginilor tabelei separate</title>
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid #039;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Prenume</th>
<th>Nume</th>
<th>E-mail</th>
</tr>
<tr>
<td>1</td>
<td>Maria</td>
<td>Carter</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>Petro</td>
<td>Parker</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>Iony</td>
<td>Rambo</td>
<td>[email protected]</td>
</tr>
<tr>
<td>4</td>
<td>Harryson</td>
<td>Potter</td>
<td>[email protected]</td>
</tr>
</table>
</body>
</html>
Notă: De asemenea, puteți elimina spațiul dintre marginile celulei de tabel setând valoarea proprietății CSS la spațierea frontierelor la 0. Cu toate acestea, elimină spațiul doar, dar nu îmbină marginile ca atunci când setați colapsul marginii la contract.

 

Setări pentru lățimea și înălțimea tabelului

În mod implicit, un tabel va fi redat suficient de larg și de înalt pentru a conține tot conținutul său.

Cu toate acestea, puteți seta și lățimea și înălțimea tabelului, precum și celulele acestuia, utilizând în mod explicit proprietatea CSS de lățime și înălțime.

Ejemplo
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="utf-8">
<title>Exemplu de setare a lățimii și înălțimii unui tabel</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
border: 1px solid #dee2e6;
}
th {
height: 40px;
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Prenume</th>
<th>Nume</th>
<th>E-mail</th>
</tr>
<tr>
<td>1</td>
<td>Maria</td>
<td>Carter</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>Petro</td>
<td>Parker</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>Iony</td>
<td>Rambo</td>
<td>[email protected]</td>
</tr>
<tr>
<td>4</td>
<td>Harryson</td>
<td>Potter</td>
<td>[email protected]</td>
</tr>
</table>
</body>
</html>

 

exemple tabele CSS, drăguțe

exemple tabele CSS receptive

șabloane pentru tabele CSS in HTML

Tags: exemple tabele CSS, drăguțe, receptive, șabloane pentru tabele CSS in HTML, machete, stiluri, tabele CSS stilizate si elegante,

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.