So verwenden Sie das CSS-Tabellenzellenattribut

Tabellenzelle ist eine Anzeigeform, die durch das Anzeigeattribut wie Inline-Elemente und Blockelemente dargestellt wird. Sie kann zum Erstellen von Tabellen und Excel-Zellen verwendet werden Tabellenzellenattribut in CSS.

Lassen Sie uns zunächst das Grundkonzept des Tabellenzellenattributs vorstellen.

Tabellenzelle ist der Wert des Anzeigeattributs, der ähnlich angegeben werden kann das Tabellen-Tag Der Stil des untergeordneten Elements.

Aber ich denke, es sieht so aus, als ob „Elemente leicht nebeneinander angeordnet werden können“.

Dieser Teil der anfänglichen „Tabelle“ hat ein Tabellen-Tag. Als sogenannte Web-Websites populär wurden, wurde das Framework im Wesentlichen mithilfe von Tabellen-Tags implementiert.

Da die Anzeige des HTML-Tags selbst obligatorisch ist, ist es nicht möglich, „Breitenunterschied, vertikale Anordnung anzeigen“ zu verwenden, und jetzt ist es völlig unsichtbar und reagiert auf das Netzwerk.

Da das HTML-Tag selbst gezwungen ist, wie eine Tabelle auszusehen, ist „wie das Anordnen einer Tabelle basierend auf der Anzeigebreite“ nicht möglich und jetzt ist es völlig unsichtbar und reagiert auf das Web.

Haben Sie in Bezug auf die „Zelle“ von „Tabelle“ von „Zelle“ in Excel usw. gehört? Mit anderen Worten: display: table - cell; kann den Rahmen in der Tabelle reproduzieren.

Eines ist zu beachten: Es bewegt sich anders als normale Blockelemente.

So verwenden Sie das Tabellenzellenattribut

Verwenden Sie grundsätzlich display:table für das übergeordnete Element und dann table-cell

Schauen wir uns ein Beispiel an

HTML

<p>apple</p> 
  </div> 
  <div class ="box orange"> 
    <p> oranges </p> 
  </div> 
  <div class ="box apple">
  <div class ="box grape"> 
    <p>grape</p> 
  </div> 
</div>

CSS

.container{
  display: table;
  width: 600px;
  height: 200px;
}
.box{
  display: table-cell;
  text-align: center;
  color: #fff;
}
.apple{
  background: #ED3B2B;
  vertical-align: middle;
}
.orange{
  background: #E4642C;
  vertical-align: top;
}
.grape{
  background: #9D2AC0;
  vertical-align: bottom;
}

Wir können Attributwerte ändern und verschiedene Operationen ausprobieren, ich werde gewonnen. Hier gibt es nicht viel zu sagen. Weitere spannende Inhalte finden Sie in der Spalte CSS-Video-Tutorial auf der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das CSS-Tabellenzellenattribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!