Pereiti prie turinio

HTML Lentele

donatas0077

Sukūrė donatas0077
Programuotojų kampas

 Dalintis Sekėjai 0

Rekomenduojami pranešimai

donatas0077

donatas0077 1

Atrašyta
  • Autorius
Atrašyta (redaguota)

niekaip nesiseka i savo vieta idet "Lenteles pavadinimas" ir uzdet sonus lenteles kaip parodyta pavyzdi

<html>
<body>
<table border="1" style="width:100%">
	<CAPTION>Lenteles pavadinimas</CAPTION>

	<tr>
		<th bgcolor=#BDBDBD>Pirmas stulpelis</th>
		<th bgcolor=#BDBDBD>Antras stulpelis</th>
		<th bgcolor=#BDBDBD>Trecias stulpelis</th>
		<th bgcolor=#BDBDBD>Ketvirtas stulpelis</th>
	</tr>

	<tr height="120px" width="50%">
		<td align="left" valign="top">Lasteles tekstas 120. Tekstas lygiuotas lasteles virsaus. Lasteles plotis 50% visos lenteles ploico.<h2><b>Sarasas</b></h2>
			<ol type="1">
				<li> Pirmas saraso elementas
				<li> Antras saraso elementas
					<ol >
						<li type="circle">Saraso sarase pirmas alementas
						<li type="circle">Saraso sarase antras alementas 
					</ol>
				<li> Trecias saraso elementas
			</ol>
		</td>
		<td valigh="middle" align="center">Tekstas centruotas lasteleje ir vertikaliai ir horizontaliai</td>
		<td valign="bottom"colspan=2>Apjungti du stulpeliai ir tekstas lygiuotas prie lasteles apacios</td>
	</tr>

	<tr height="80px">
		<td align="right">Lasteles aukstis 80, tekstas centruotas lasteles vertikaliai, horizontaliai lygiuotas prie desinio lasteles krasto.</td>
		<td align="right"><I>Pasvires tekstas lygiuotas palei desiniji lasteles krasta</I></td>
		<td valigh="middle" ><STRIKE><font color="blue">Perbrauktas tekstas paciame lasteles centre</font></STRIKE></td>
		<td valign="top" alight="center">Tekstas lygiuotas prie lasteles virsaus</td>
	</tr>

<td COLSPAN="4" bgcolor=#BDBDBD align="center">Pirmos lenteles paskutine eilute apjungenti visus stulpelius</td>
</table>
</body>
</html>

 

 

Isspresta

Redagavo donatas0077
Nuoroda į pranešimą
Dalintis kituose puslapiuose
xau

xau 8

Atrašyta
Atrašyta

Lentelė

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table HTML</title>
</head>

<body>
<div class="wrap">
<!-- Lentelė -->
<table class="table">
 	<caption>Lentelės pavadinimas</caption>
 	<!-- Lentelės viršus: stulpelių pavadinimai -->
   <thead>
     <tr>      	      
       <th>Pirmas stulpelis</th>
       <th>Antras stulpelis</th>
       <th>Trečias stulpelis</th>
       <th>Ketvirtas stulpelis</th>        
     </tr>
   </thead>
   <!-- Lentelės apačia -->
   <tfoot>
   	<tr>
   		<td colspan="4">Footer</td>
   	</tr>
   </tfoot>
   <!-- Lentelės duomenys -->
   <tbody>    
   	<!-- Pirma eiluė -->
     <tr>        
       <td>
       	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque illo eaque, amet quaerat magnam recusandae!</p>
				<section>
					<h2>Sąrašas</h2>
					<ol>
						<li>a</li>
						<li>b</li>
						<li>c</li>
					</ol>
				</section>					
       </td>
       <td>2</td>
       <td colspan="2">3 ir 4</td>               
     </tr>
     <!-- Antra eilutė -->
     <tr>        
       <td>1</td>
       <td>2</td>
       <td>3</td>
       <td>4</td>       
     </tr>
     <!-- Treia eilutė -->
     <tr>        
       <td colspan="4">1 2 3 4</td>               
     </tr>      
   </tbody>
   <!-- Lentelės duomenys END -->
 </table>
 <!-- Lentelė END -->
 </div>
</body>
</html>

 

Stilius

<style>
.wrap {
	width:1024px;
	margin:0 auto;
}
.table {
	width:100%;
	border-collapse:collapse;
}
.table>thead, .table>tfoot {
	background-color: #d8d8d8;
	text-align: center;
}
.table>tbody>tr>td, .table>thead>tr>th, .table>tfoot>tr>td, .table>thead>tr>td, .table>thead>tr>th {
	padding: 8px;
   line-height: 1.42857143;
   vertical-align: top;
   border: 1px solid #ddd;
 }
 .table>tbody>tr:nth-child(1)>td:nth-child(2) {
 	vertical-align: middle;
 	text-align: center;
 }
 .table>tbody>tr:nth-child(1)>td:nth-child(3) {
 	vertical-align:bottom;
 }
 .table>tbody>tr:nth-child(2)>td:nth-child(-n+2) {
 	text-align:left; text-align: right;
 }  
 .table>tbody>tr:nth-child(2)>td:nth-child(3) {
 	vertical-align: middle;
 	text-align: center;
 	color:blue;
 	text-decoration: line-through;
 }  
 .table>tbody>tr:nth-child(3) {
 	text-align: center;
 }
</style>

 

valign nebenaudojamas html5

Nuoroda į pranešimą
Dalintis kituose puslapiuose

Prisijunkite prie diskusijos

Jūs galite rašyti dabar, o registruotis vėliau. Jeigu turite paskyrą, prisijunkite dabar, kad rašytumėte iš savo paskyros.

Svečias
Parašykite atsakymą...

×   Įdėta kaip raiškusis tekstas.   Atkurti formatavimą

  Only 75 emoji are allowed.

×   Nuorodos turinys įdėtas automatiškai.   Rodyti kaip įprastą nuorodą

×   Jūsų anksčiau įrašytas turinys buvo atkurtas.   Išvalyti redaktorių

×   You cannot paste images directly. Upload or insert images from URL.

Įkraunama...
×
 Dalintis
Sekėjai 0
Eiti į temų sąrašą

  • Dabar naršo   0 narių

    Nei vienas registruotas narys šiuo metu nežiūri šio puslapio.

×
×
  • Pasirinkite naujai kuriamo turinio tipą...