Tabele CSS

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	clarkkent@mail.com
2	John	Carter	johncarter@mail.com
3	Peter	Parker	peterparker@mail.com

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>mariacarter@yahoo.com</td>

</tr>

<tr>

<td>2</td>

<td>Petro</td>

<td>Parker</td>

<td>petroparker@yahoo.com</td>

</tr>

<tr>

<td>3</td>

<td>Iony</td>

<td>Rambo</td>

<td>ionyrambo@gmail.com</td>

</tr>

<tr>

<td>4</td>

<td>Harryson</td>

<td>Potter</td>

<td>harrysonpotter@mail.com</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>mariacarter@yahoo.com</td>

</tr>

<tr>

<td>2</td>

<td>Petro</td>

<td>Parker</td>

<td>petroparker@yahoo.com</td>

</tr>

<tr>

<td>3</td>

<td>Iony</td>

<td>Rambo</td>

<td>ionyrambo@gmail.com</td>

</tr>

<tr>

<td>4</td>

<td>Harryson</td>

<td>Potter</td>

<td>harrysonpotter@mail.com</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>mariacarter@yahoo.com</td>

</tr>

<tr>

<td>2</td>

<td>Petro</td>

<td>Parker</td>

<td>petroparker@yahoo.com</td>

</tr>

<tr>

<td>3</td>

<td>Iony</td>

<td>Rambo</td>

<td>ionyrambo@gmail.com</td>

</tr>

<tr>

<td>4</td>

<td>Harryson</td>

<td>Potter</td>

<td>harrysonpotter@mail.com</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

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

Find here examples of creative and unique website layouts.

Free CSS HTML Menu

Find here examples of creative and unique website CSS HTML menu.