Zarovnanie tabuliek HTML oboma spôsobmi - html, css, html5, html-table

Mám tabuľku s dvoma stĺpcami:

<table border="1" bordercolor="#FFCC00" style="background-color:#FFFFCC" width="250" cellpadding="3" cellspacing="3">
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</table>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/html_table_tutorial.cfm" target="_top">HTML Tables</a></p>

Mám problém s textom. Ako môžem zarovnať ľavý text naľavo a text na pravej strane napravo? Existujú aj iné spôsoby, ako to dosiahnuť?

odpovede:

4 pre odpoveď č. 1

Nasledujúci CSS bude mať druhý td v každom riadku a nastavte text-align Vlastnosť CSS sa zarovnáva doprava.

td:first-child+td {
text-align: right;
}

Triedu (a pravdepodobne by ste mali) samozrejme pridať do svojej tabuľky a do tohto pravidla tak, aby sa vzťahovala iba na konkrétnu tabuľku, ktorú chcete zarovnať týmto spôsobom.

Môžete tiež použiť na výber bunky v druhom stĺpci:

td:nth-child(2)

ale nezabudnite, že je to vlastnosť CSS3 a nie je tak široko podporovaná ako môj prvý príklad.

---

0 pre odpoveď č. 2

Použite triedy:

td.leftSide {
text-align:left;
}

td.rightSide {
text-align:right;
}

---

0 pre odpoveď č. 3

CSS:

table tr td:first-child {
text-align:left;
}

table tr td:nth-child(1) { // or :last-child
text-align:right;
}

Upozorňujeme, že ide o selektory CSS3, takže na starších prehliadačoch nebudú fungovať tak, ako sú.

---

0 pre odpoveď č. 4

Existuje niekoľko spôsobov, ako to dosiahnuť. Jedným z nich by bolo použitie internetu :first-child a :last-child pseudotriedy:

td:last-child {
text-align: right;
}
td:first-child {
text-align: left;
}

Príklad Hlavička

---