The Blog

By / Egzamin E.14Egzamin EE.09HTML

HTML: tabele.

Tabele

Tabele służą do reprezentacji danych w kolumnach i wierszach. Są tworzone za pomocą znacznika <table>, wiersze są definiowane za pośrednictwem <tr> zaś komórki kolumn definiujemy za użyciem znacznika <td>. Nagłówki kolumn definiujemy przy użyciu tagu <th>.

Przykładowa tabelka:

<!DOCTYPE html>
<html>
  <head>
	(...)
	<style>
  	  table{
    	    border-collapse: collapse;
  	  }
  	  td, table, th, tr{
    	    border: 1px black solid;
  	  }
  	  td, th{
    	    padding:2px; text-align: center;
  	  }
	</style>
  </head>
  <body>
	<table>
  	  <tr>
    	    <th>Zawartość nagłówka</th>
		(...)
  	  </tr>
  	  <tr>
    	    <td>Zawartość komórki</td>
		(...)
	  </tr>
	  <tr>
	    (...)
  	  </tr>
	</table>
    </body>
</html>

Możemy scalić poszczególne komórki ze sobą, będące w innej kolumnie za pomocą atrybutu colspan oraz w innym wierszu, za pomocą atrybutu rowspan.

Scalanie komórek za pomocą atrybutów rowspan i colspan:

<!DOCTYPE html>
<html>
  <head>
  (...)
	<style media="screen">
  		table{
    			border-collapse: collapse;
  		}
  		td, table, tr{
    			border: 2px black solid;
  		}
 		td{
    			padding:5px; text-align: center;
  		}
  			td[rowspan="2"], td[colspan="2"]{
    			background-color: #555555; color: white;
  		}
	</style>
 </head>
 <body>
	<table>
  		<tr>
    			<td rowspan="2">rowspan="2"</td>
    			<td>Zawartość komórki</td>
    			<td>Zawartość komórki</td>
    			<td>Zawartość komórki</td>
  		</tr>
  		<tr>
    			<td>Zawartość komórki</td>
    			<td colspan="2">colspan="2"</td>
  		</tr>
	</table>
  </body>
</html>

Autor tekstu: Jacek Woźniak

kompendiumEE09

Jestem projektem wykonanym przez czwórkę znajomych mających podobne zainteresowania. Możesz znaleźć wszystkie materiały z zakresu E14 na stronie: http://danda.e-kei.pl/jacek/kompendiumEE_IX/