CSS richtig schreiben?

ich muss eine CSS benutzen um eine bestimmte Eigenschaft zu vergeben. Mein Problem ist, wie ich die richtig benenne.

das html:

<div class="alle">

<table class="tabelle">

<tr>

<td class="zelle"> </tr>

<td class="zelle"> </tr>

</tr>

</table>

</div>

Wie muss ich die CSS Eigenschaft nennen damit ich "Zelle" ansprechen kann?

18.01.2024, 14:20

vielleicht versteht man es jetzt

2 Antworten

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Programmiersprache, Informatik

18.01.2024, 12:57

Siehe hierfür:

https://www.w3schools.com/cssref/css_selectors.php

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors

https://wiki.selfhtml.org/wiki/CSS/Selektoren

Für Klassen brauchst du einen Punkt vor dem Bezeichner:

.zelle

Hessenzicke

Fragesteller

18.01.2024, 12:58

klappt nicht. td.zelle klappt auch nicht

0

Destranix

18.01.2024, 12:59

DDann machst du etwas falsch womöglich. Poste mal ein reproduzierbares Beispiel das nicht funktioniert und sag, was es tun soll.

1

Hessenzicke

Fragesteller

18.01.2024, 13:00

falsch ist, dass er es nicht findet. wenn man auf untersuchen geht steht da, dass nicht "zelle" genommen wird. sondern nur das was unter "alle" steht

0

Destranix

18.01.2024, 13:16

Da ich nicht weiß, wovon du sprichst, kann ich dir da schlecht weiterhelfen.

Ich sehe aber, dass du deine "td"-tags mit einem "/tr" geschlossen hast und nicht mit einem "/td"

0

Hessenzicke

Fragesteller

18.01.2024, 14:34

ich hab ein Bild hochgeladen. Ich mag gern, dass Day gezogen wird, wirds aber nicht

0

Destranix

18.01.2024, 14:36

Und wie sieht dein CSS dazu aus?

0

Hessenzicke

Fragesteller

18.01.2024, 14:39

.Day {

background-color:#a3c9e8 !important;

}

#Day {

background-color:#a3c9e8 !important;

}

Day {

background-color:#a3c9e8 !important;

}

#Kalender td.Day {

background-color:#a3c9e8 !important;

}

td.Day {

background-color:#a3c9e8 !important;

}

.Kalender {

background-color:#a3c9e8 !important;

}

#Kalender {

background-color:#a3c9e8 !important;

}

Kalender {

background-color:#a3c9e8 !important;

}

.tabbed figure>div Kalender{

background-color:#a3c9e8 !important;

}

habe Alles versucht . er zieht es aber nie. die Frage ist wie muss es richtig heissen, also vor der Klammer

0

Destranix

18.01.2024, 14:40

".Day" müsste eigentlich passen. Was steht in den er Konsole dazu, evtl. ist ein fehler aufgetreten?

Ansonsten kannst du mal auf "Netzwerk" gehen, den Cache deaktivieren und die Seite neu laden (danach den Cache wieder aktivieren). Aber zuvor würde ich erst in die Konsole schauen.

Ansonsten kannst du auch einmal schauen, ob du bei "Debugger" links dein Stylesheet findest und ob das dort korrekt angezeigt wird.

0

Hessenzicke

Fragesteller

18.01.2024, 14:41

das bild ist doch die konsole

0

Destranix

18.01.2024, 14:42

Ne, das ist der Inspektor. Klick oben auf "Konsole" und du siehst evtl. Fehlermeldungen.

1

MonkeyKing

18.01.2024, 14:44

Der rote Kreis mit dem Ausrufezeichen und der Zahl "2" sagt, dass zwei Fehler auftreten.

0

18.01.2024, 13:09

Also eine Tabelle "tabelle" zu nennen und eine Zeile "zeile" zu nennen keinen Sinn. Aber wenn du das machst, brauchst du einfach den Class selector ".zelle".

EDIT: es macht keinen Sinn, weil du auch einfach nur den selector

td

nehmen könntest

Hessenzicke

Fragesteller

18.01.2024, 13:12

aber wenn dieses td (zelle) in dieser tabelle anders sein sollen als die td sonst, was dann?

0

MonkeyKing

18.01.2024, 13:27

dann vergibst du eine Klasse, aber eben nicht "zeile" sondern etwas sinnvolleres, was sich auf den Inhalt oder Darstellung bezieht, z.B. "author" oder "highlight". Generell würde ich immer englische Bezeichnungen nehmen, auch wenn das nicht umbedingt nötig ist.

0

Hessenzicke

Fragesteller

18.01.2024, 14:34

guck mal bild. wichtig ist dass Day gezogen wird, wirds aber nicht

0

MonkeyKing

18.01.2024, 14:41

Klassennamen sind case sensitiv, d.h. Groß und Kleinschreibung wird unterschieden. Hast du ".Day" verwendet? Ich würde Klassenamen aber auch nur klein schreiben.

0

MonkeyKing

18.01.2024, 14:42

Ok ich sehe du hast das ausprobiert. Dann ist das CSS wohl nicht richtig eingebunden.

0

Hessenzicke

Fragesteller

19.01.2024, 12:59

die datei schon, aber keiner der bereiche wird gezogen, sieht man ja im inspektor

0

MonkeyKing

19.01.2024, 13:06

Warum bist du so sicher dass die Datei gezogen wird? Du kannst auch mal probieren das CSS inline im Header Bereich einzubinden.

<header>
..
<style>
  .Day {  
      background-color: #a3c9e8 !important;
   }
</style>
</header>

<body>
...
</body>

0

Hessenzicke

Fragesteller

19.01.2024, 13:08

na weil da zB steht:

table {} global.css 120

0

MonkeyKing

19.01.2024, 13:10

Versuch doch mal, was ich vorgeschlagen habe.

0

Hessenzicke

Fragesteller

19.01.2024, 13:24

klappt leider auch nicht. es geht nur wenn ich den style direkt ins td schreib, aber das mag ich ja eigentlich ned

0

MonkeyKing

19.01.2024, 13:25

Ne das ist auch nicht gut. Leider lässt sich der Fehler so nicht finden, dazu müsste man mal direkt in deine Dateien gucken. Denn eigentlich müsste es funktionieren.

0

MonkeyKing

19.01.2024, 13:26

Vielleicht mal hier einkopieren?

0

MonkeyKing

19.01.2024, 13:31

https://onlinehtmleditor.dev/collaboration/#doce187d91d3d

0

Ähnliche Fragen

CSS-Table zentrieren?

Hallo!

Ich möchte dieses Diagramm und diese Tabelle zentrieren? Doch wie geht das?



<div id="curve_chart" style="width: 900px; height: 500px"></div>

<table class="center">
    <thead>
        <tr>
            <th>ID</th>
            <th>Temperatur</th>
            <th>Zeitpunkt</th>
        </tr>
    </thead>
    <tbody>
        {% for temp in temps %}
        <tr>
            <td>{{temp.id }}</td>
            <td>{{temp.temperatur }}</td>
            <td>{{temp.zeitpunkt }}</td>
        </tr>
        
        {% endfor %}
        
    </tbody>
</table>


{% endblock %}

Tabelle in html mit CSS verschieben?

Habe eine Tabelle:

<table border="1">

<table class="anker"

<tr>

<td>Anker 1</td>

<td>Anker 1</td>

</tr>

wollte die tabelle dann mit css:

table.anker{

margin-top: 50px;}

verschieben, aber wenn verschoben wird verschwinden die rahmen von der Tabelle

dynamische Tabelle mit php erzeugen?

Hallo, ich will eine dynamische tabelle mit php erzeugen. Die zahlen sollten hochzählen und die reihen und spalten sollten sich oben in der leiste durch eingabe ändern lassen. Bisher habe ich das:

<table>
<?php
$rows =10;
$cols =20;
$zahl=1;
for ($tr = 0; $tr < $rows; $tr++) {
  echo '<tr>';
for ($td = 0; $td < $cols; $td++) {
  echo'<td> </td>';
    $zahl++;
  {
echo '</tr>;
}
?>
</table>

Leider komme ich jetzt nicht mehr weiter

PHP: Ergebnis erst später aufdecken nach Antwort?

Hey,

ich habe folgenden html und php-Code.

<form action="Subtraktion (1).php" method="post" target="">
<table>
<tr>
<td><font face="Roboto Slab" size=+1>Anzahl der Aufgaben eingeben</font></td>
<td><input type="Text" name="z" value="" size="" maxlength=""></input></td>
<td align="center"><input type="submit"  style="font-family: 'Roboto Slab'"  background-color="black" name="y" value="Absenden"></td></tr>
</table>
<br>
</form>

<?php
if((isset($_POST['z'])) and (is_numeric($_POST['z'])))
{
$zahl = $_POST['z'];

{

 while($zahl>0)
  {

  $a = rand(5, 10);
  $b = rand(0, 5);
  $erg = $a - $b;
  $zahl = $zahl - 1;

  echo "<table class='Tab'>";
  echo "<table border='1'>";
  echo "<tr> <td>$a - $b = ?</td> <td><input type=\"Text\" name=\g\"  value=\"\">\n</td><td>$a - $b = $erg</td></tr>";
  echo "</table>";
}
}}

?>
</body>
</html>

Damit soll der Nutzer Aufgaben – so viel wie er anfangs ausgewählt hat, berechnet können. Die Aufgaben bestehen hierbei aus zufälligen Zahlen. Meine Frage wäre jetzt: wie ich es schaffen kann (mit eher einfachen Befehlen), den Code so zu schreiben, dass das Ergebnis – hier: $a - $b = $erg – erst enthüllt wird, sobald der Nutzer ins Textfeld seine Antwort zur Aufgabe eingegeben hat?

Hier nochmals die Stelle (auch oben zusammen mit dem gesamten Code sichtbar):

echo "<table class='Tab'>";
echo "<table border='1'>";
echo "<tr> <td>$a - $b = ?</td> <td><input type=\"Text\" name=\g\" value=\"\">\n</td><td>$a - $b = $erg</td></tr>";
echo "</table>";

Vielen Dank :)

Border-Radius in Tabellen ohne CSS?

Hi zusammen,

die Frage ist mir zwar etwas peinlich, aber ich bekomme es nicht gelöst und brauche mal eure Hilfe.

Weiß jemand wir man die Ecken einer Tabelle abgerundet bekommt, ohne dafür css zu verwenden?

Ich habe nämlich folgendes Problem:

Ich versuche, ein neues Email-Template zu bauen. Leider werden je nach E-Mailprogramm einige CSS Befehle nicht erkannt (Outlook). Da ich nicht mit Bildern arbeiten möchte, suche ich hierzu eine „reine HTML-Lösung“.

oder:

Wenn jemand, weiß wie man Outlook dazu bringen kann auf Border-Radius (css) zu reagieren, nehme ich auch gerne jeden anderen Vorschlag an ^^

Lieben Dank schon mal 😊

<table class="emailTable">
    <tr class="firstTR">
        <td>1</td>
        <td>2</td>
     </tr>
</table>

Wie kann ich bei dieser Website den Link nach oben rechts verschieben?

Ich habe einen Link erstellt, der mich wieder zurück zur Hauptwebsite bringt. Nur möchte ich, dass der Link oben rechts ist. Kann mir da jemand helfen?

Die Webseite:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preise</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Open Sans', sans-serif;
      padding-left: 100px;
      padding-right: 100px;
    }

    .preise-navbar {
      padding-left: 100px;
      color: rgb(52, 57, 56);
    }

    .preise-container {
      background-color: white;
      padding: 16px;
    }

    table {
      border-collapse: collapse;
    }

    td,
    th {
      padding: 16px;
      border-bottom: 2px solid #8ebf42;
      text-align: center;
      padding-left: 100px;
    }

    a {
    }
  </style>
</head>
<body>
  <div class="preise-container">
    <h1 class="preise-navbar">Preise:</h1>
  </div>
  <table>
    <tr>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td>Erwachsene:</td>
      <td>20€</td>
    </tr>
    <tr>
      <td>Kinder unter 18</td>
      <td>10€</td>
    </tr>
    <td>Kinder unter 6</td>
    <td>3€</td>
  </table>
  <a href="Index.html">Zurück</a>
</body>
</html>

Html in ein td ein icon einbauen?

Hallo.

Wie kriege ich es hin das ich in ein td also

<table>

<tr>

<td> Hier soll das icon rein <td>

</tr>

</table>

Also sowas <box-icon name='trash'></box-icon> da rein wegen zwischen den td klappt nicht habe ich ausprobiert und ja wenn's geht sollte im td stehen

Danke im Voraus.

PHP: Array in HTML Tabelle ausgeben?

In der Live Ansicht meines Codes steht unter der Spalte "Student" jedes mal "Array" im Feld der ersten Spalte und in der vierten Spalte wird das zweite "/" angehängt.

Wie kann ich das "Array" eliminieren, sodass die Formatierung passt?

Danke schonmal!

<?php

$studis = array(

array("student" => "Bauer", "projekt" => "/", "ende" => "/"),

array("student" => "Meier", "projekt" => "/", "ende" => "/"),

array("student" => "Lang", "projekt" => "/", "ende" => "/"));

$tabelle = "<table>

<caption>Projekte</caption>

<tr><td>Student</td><td>Projekttitel</td><td>Ende</td></tr>";

foreach ($studis as $student => $name){

$tabelle .= "<tr><td>$name</td>";

foreach ($name as $ende => $datum){

$tabelle .= "<td>$datum</td>";

}

$tabelle .= "</tr>";

}

$tabelle .= "</table>";

echo $tabelle;

?>

CSS Grid leere Zelle?

Hi,

bin gerade etwas Ratlos wie ich das mit css grid umsetzen kann.

Aktuelle habe ich folgenden Code

<div class="grid-container">
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div class="grid-item">Ein Text</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div class="grid-item">Ein Text</div>
  <input type="text" class="grid-item">
  <div class="grid-item">Ein Text</div>
  <select class="grid-item"></select>
  <div class="grid-item">Ein Text</div>
</div>

CSS 
.grid-container {
  display: grid;
  gap: .5em;
  grid-template-columns: repeat(4, 1fr);
}

https://jsfiddle.net/tb2e75L8/2/

Jetzt will ich jedoch alle Div's mit dem Inhalt "Ich soll leer sein" aus dem html entfernen ohne jedoch die nachfolgenden zu verschieben. Also sozusagen eine Leere Zelle. Ich habe schon über grid-template-areas nachgelesen, jedoch bräuchte ich da für jedes item eine eigene ID, oder sehe ich das falsch?

Für sonstige Vorschläge zum realisieren von diesem Layout (auch ohne Grid) bin ich grundsätzlich auch offen.

Vielen Dank im Voraus

whgoffline

Einzelne Schriften in HTML Bearbeiten?

Hallo,

ich habe vor kurzem begonnen eine Website mit HTML zu programmieren, dazu nutze ich Visual Studio Code, aber ich mache das ganz noch nicht so lange, also kenne ich mich noch nicht so gut aus. Zurzeit versuche ich eine Tabelle mit verschiedenen Raritäten zu erstellen. Dazu soll z.B. "Rare" einen blauen Rahmen bekommen, so ähnlich wie in Bild 1 zusehen.

Ich habe schon versucht es zu schaffen, dennoch habe ich bisher nur hinbekommen um alles einen Rahmen zu kreieren.

Meine Frage ist nun, wie man das individuell anpassen kann. So brauche ich die Rahmen nur bei den Namen der Raritäten und diese sollen jeweils eine eigene Farbe haben (z.B. "Rare" = blau, "Epic" = Violett usw.). Außerdem soll der Rahmen genau passen. So ist es bei mir oben so, dass es für "Uncommon" passt, aber für "Epic" viel zu groß ist. Meine Skills in HTML reichen bisher nur die Rahmen für alle zu machen. Ich habe den Style so gemacht:

CSS:

table tr td
{
  font-size: 1.2em;
  background: #fff;
  color: black;
  border-radius: 20px;
  padding: 4px 10px;
}

Vermutlich nicht besonders gut, aber da hoffe ich auf eure Hilfe 😅 Falls es euch etwas hilft, schreib' ich hier noch ein Beispiel hin, wie ich die Tabelle gemacht habe (das Richtige ist natürlich länger)

HTML:

<table>
  <thead>
    <tr>
      <th>Eyes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Normal</td>
      <td>23.99%</td>
      <td>Common</td>
    </tr>
  </tbody>
  <tfoot>
  </tfoot>
</table>

PHP – Textfeld in der Tabellenzelle "unsichtbar" machen?

Hallo, liebe Community!

Ich habe eine Tabelle in php erstellt, damit dort meine Werte und Variablen geordnet eingegeben werden können.

Wie kann ich nun das Textfeld in die Tabellenzelle so einfügen, dass es diese gesamt füllt? Also dass es sich so anfühlt, als würde ich direkt in die Zelle schreiben.

Das wäre meine bisheriger Code:

echo "<table class='Tabelle'>";

echo "<table border='1'>";

echo "<tr> <td>$a </td> <td><br><input type=\"\" style=\"border: none\" name=\"g\" value=\"\">\n</td> <td>Summe von $a - $b = $c</></tr>";

echo "</table>";

LG, Jim

Css Table Design?

Hi ich würde gerne die Border ganz schwarz machen habe auch

border: #black

aber irgendwie ist die border noch grau innen wie bekomme ich das weg?

hab table, td und tr auf schwarz :)))) bitte jemand helfen :p

warum funktioniert dieses xslt script nur im Internet Explorer abere nicht in chrome oder edge?

Hallo,

ich habe ein XSLT Script das eine xml zu einer Tabelle umformen soll. Das Script funktioniert nur in IE11 aber nicht in den anderen Browsern.

...

$index_file="index_station.php";

...

echo '<?xml version="1.0" encoding="ISO-8859-1"?>';
echo '<xsl:stylesheet xmlns="http://www.w3.org/1999/xhtml" >';
?>
<xsl:stylesheet version="1.0"
     xmlns:xsl="http://www.w3.org/1999/XSL/Transform"  
    xmlns:js="http://www.w3.org/1999/xhtml">
<xsl:template match="/">
 

...
      <?php include "index_station_checkbox.php"; ?>
      <hr/>   
      </td></tr>
         <xsl:apply-templates select="KKHABG/PATIENT">
         <xsl:sort select="<?php echo $xmlsort; ?>" />
         </xsl:apply-templates>
        </TABLE> 
     </BODY>
  </HTML>
</xsl:template>

<xsl:template match="PATIENT">
   <tr>
   <td valign="top" class="patientname">
      <xsl:element name="a">
      <xsl:attribute name="href">
      <xsl:value-of select="PatID/@VALUE"/>
      </xsl:attribute>
      <xsl:value-of select="nachname"/>, <xsl:value-of select="vorname"/>
      </xsl:element>
      <br/><xsl:value-of select="alter"/> - Zi./Bett: <xsl:value-of select="FALL/Behand/ort"/></td>
      <td valign="top" widht="100%">
      <table class="befund">
         <xsl:apply-templates select="FALL/Befund" >
         <xsl:sort select="BefZeit" order="descending"/>
         </xsl:apply-templates>   
      </table>
   </td>
   </tr>
   <tr><td colspan="2"><hr/></td></tr>
</xsl:template>

<xsl:template match="FALL/Befund">
<xsl:if test="<?php echo $sourcexml; ?>">
   <tr>
   <td valign="top" width="100px"><xsl:value-of select="Source"/></td>
   <td valign="top" width="40px">
      <div class="tooltip">
      <xsl:element name="a">
      <xsl:attribute name="href">
      <xsl:value-of select="ID/@ZIEL"/>
      <?php echo $var.'&amp;befart='.$befart.'&amp;befundid=';?><xsl:value-of select="ID/@VALUE"/>
      </xsl:attribute>
      <b><xsl:value-of select="ID"/></b>
      </xsl:element>
      <span class="tooltiptext2"><xsl:value-of select="ID/@TOOLTIP"/>      
      </span>
      </div>
   </td>   
   <td valign="top" width="150px"><xsl:value-of select="BefZeit"/></td>
   <td valign="top">
      <div class="tooltip">
      <xsl:choose>
      <xsl:when test="BefArt/@VALUE">
      <xsl:element name="a">
      <xsl:attribute name="href">
      <xsl:value-of select="BefArt/@VALUE"/>
      </xsl:attribute>
      <xsl:attribute name="target" >_blank</xsl:attribute>
      <b><xsl:value-of select="BefArt"/></b>
      </xsl:element>
      </xsl:when>
      <xsl:otherwise>
      <b><xsl:value-of select="BefArt"/></b>   
      </xsl:otherwise>
      </xsl:choose>
      <span class="tooltiptext">
         <!-- <b><xsl:value-of select="BefArt"/></b><br/> /-->
         <xsl:value-of select="BefText" disable-output-escaping="yes"/>
         <br/><br/>
      </span>
      </div>
      </td>
   </tr>
   </xsl:if>
</xsl:template>
</xsl:stylesheet>

Wie kann ich mit Javascript eine Zeile einer (HTML)Tabelle auslesen?

<table width="840px" height="100px" border="solid">
<tr>
<td width="270px" align="center" id="eineID">
50
</td>
<td>
<script type="text/javascript">
//auslesen der 50
</script>
</td>
</tr>
</table>

Was möchtest Du wissen?

Deine Frage stellen

gf-shortened-block.is-short { max-height: none !important; } gf-shortened-block.is-short::after { display: none !important; } body { font-family: 'Roboto',sans-serif !important; } h1,h2,h3,h4,h5,h6 { font-family: 'Roboto Slab',serif !important; }