ソースを参照

Docs: Added a rich editor content with a styled table.

Aleksander Nowodzinski 6 年 前
コミット
9a35a870a8

+ 97 - 49
packages/ckeditor5-table/docs/_snippets/features/table-styling.html

@@ -1,54 +1,102 @@
 <div id="snippet-table-styling">
-	<p>The ultimate table of <a href="https://en.wikipedia.org/wiki/List_of_coffee_drinks">coffee drinks</a>:</p>
-	<table>
-		<thead>
-			<tr>
-				<th rowspan="2"></th>
-				<th scope="col" rowspan="2">Espresso</th>
-				<th scope="colgroup" colspan="2">Milk</th>
-				<th scope="col" rowspan="2">Water</th>
-			</tr>
-			<tr>
-				<th scope="col">Steamed</th>
-				<th scope="col">Foam</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr>
-				<th scope="row">Cappuccino</th>
-				<td>yes</td>
-				<td>yes</td>
-				<td>yes</td>
-				<td>no</td>
-			</tr>
-			<tr>
-				<th scope="row">Macchiato</th>
-				<td>yes</td>
-				<td>no</td>
-				<td>yes</td>
-				<td>no</td>
-			</tr>
-			<tr>
-				<th scope="row">Latte</th>
-				<td>yes</td>
-				<td>yes</td>
-				<td>no</td>
-				<td>no</td>
-			</tr>
-			<tr>
-				<th scope="row">Americano</th>
-				<td>yes</td>
-				<td>no</td>
-				<td>no</td>
-				<td>yes</td>
-			</tr>
-		</tbody>
-	</table>
+	<h2>Balance Sheet &amp; Cash Flow Statement Information</h2>
+	<p>(In millions, except DSO)</p>
+	<figure class="table">
+		<table style="border-bottom:1px solid;border-left:1px solid;border-right:1px solid;border-top:1px solid;">
+			<thead>
+				<tr>
+					<th style="background-color:#eee;text-align:left;width:317px;" colspan="1">&nbsp;</th>
+					<th style="background-color:#1d7373;text-align:center;width:224px;" colspan="3">Full Year (unaudited)</th>
+					<th style="background-color:#1d7373;text-align:center;width:360px;" colspan="4">2013 (unaudited)</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<th style="background-color:#eee;width:317px;">&nbsp;</th>
+					<td style="background-color:#5ccccc;width:78px;">2011</td>
+					<td style="background-color:#5ccccc;width:73px;">2012</td>
+					<td style="background-color:#5ccccc;width:72px;">2013</td>
+					<td style="background-color:#5ccccc;width:72px;">Q1</td>
+					<td style="background-color:#5ccccc;width:72px;">Q2</td>
+					<td style="background-color:#5ccccc;width:72px;">Q3</td>
+					<td style="background-color:#5ccccc;width:72px;">Q4</td>
+				</tr>
+				<tr>
+					<th style="background-color:#ffd5b2;text-align:center;width:317px;"><strong>Cash, Cash Equivalents&nbsp;</strong></th>
+					<td style="width:78px;">$44,626</td>
+					<td style="width:73px;">$48,088</td>
+					<td style="width:72px;">$58,717</td>
+					<td style="width:72px;">$50,098</td>
+					<td style="background-color:#c7ffc7;border-bottom:2px solid green;border-left:2px solid green;border-right:2px solid green;border-top:2px solid green;width:72px;">$54,432</td>
+					<td style="width:72px;">$56,523</td>
+					<td style="width:72px;">$58,717</td>
+				</tr>
+				<tr>
+					<th style="background-color:#ffd5b2;text-align:center;width:317px;"><strong>Accounts Receivable</strong>
+					</th>
+					<td style="width:78px;">$5,427</td>
+					<td style="width:73px;">$6,769</td>
+					<td style="background-color:#ffc7c7;border-bottom:2px solid red;border-left:2px solid red;border-right:2px solid red;border-top:2px solid red;text-align:left;width:72px;">$8,098</td>
+					<td style="width:72px;">$6,526</td>
+					<td style="width:72px;">$6,792</td>
+					<td style="width:72px;">$7,083</td>
+					<td style="width:72px;">$8,098</td>
+				</tr>
+				<tr>
+					<th style="background-color:#ffd5b2;text-align:center;width:317px;"><i>DSO for Company stand-alone</i>
+					</th>
+					<td style="width:78px;">52</td>
+					<td style="width:73px;">54</td>
+					<td style="width:72px;">53</td>
+					<td style="width:72px;">45</td>
+					<td style="width:72px;">47</td>
+					<td style="width:72px;">47</td>
+					<td style="width:72px;">47</td>
+				</tr>
+				<tr>
+					<th style="background-color:#ffd5b2;text-align:center;width:317px;"><strong>Property and Equipment, Net</strong></th>
+					<td style="width:78px;">$9,603</td>
+					<td style="width:73px;">$11,854</td>
+					<td style="width:72px;">$16,524</td>
+					<td style="width:72px;">$12,300</td>
+					<td style="width:72px;">$12,912</td>
+					<td style="width:72px;">$14,867</td>
+					<td style="width:72px;">$16,524</td>
+				</tr>
+				<tr>
+					<th style="background-color:#ffd5b2;text-align:center;width:317px;"><strong>Total Assets</strong></th>
+					<td style="background-color:#ffc7c7;border-bottom:2px solid red;border-left:2px solid red;border-right:2px solid red;border-top:2px solid red;width:78px;">$72,574</td>
+					<td style="width:73px;">$93,798</td>
+					<td style="width:72px;">$110,920</td>
+					<td style="width:72px;">$96,692</td>
+					<td style="width:72px;">$101,182</td>
+					<td style="background-color:#c7ffc7;border-bottom:2px solid green;border-left:2px solid green;border-right:2px solid green;border-top:2px solid green;width:72px;">$105,068</td>
+					<td style="width:72px;">$110,920</td>
+				</tr>
+				<tr>
+					<th style="background-color:#ffd5b2;text-align:center;width:317px;"><strong>Cash Flow from Operations</strong></th>
+					<td style="width:78px;">$14,565</td>
+					<td style="width:73px;">$16,619</td>
+					<td style="width:72px;">$18,659</td>
+					<td style="width:72px;">$3,633</td>
+					<td style="width:72px;">$4,705</td>
+					<td style="width:72px;">$5,083</td>
+					<td style="width:72px;">$5,238</td>
+				</tr>
+				<tr>
+					<th style="background-color:#ffd5b2;text-align:center;width:317px;"><strong>Capital Expenditures</strong></th>
+					<td style="width:78px;">$3,438</td>
+					<td style="width:73px;">$3,273</td>
+					<td style="width:72px;">$7,358</td>
+					<td style="width:72px;">$1,203</td>
+					<td style="width:72px;">$1,611</td>
+					<td style="width:72px;">$2,289</td>
+					<td style="vertical-align:middle;width:72px;">$2,255</td>
+				</tr>
+			</tbody>
+		</table>
+	</figure>
 </div>
 
 <style>
-	.ck.ck-content table td,
-	.ck.ck-content table th {
-		vertical-align: middle;
-	}
 </style>

+ 1 - 1
packages/ckeditor5-table/docs/features/table.md

@@ -11,7 +11,7 @@ The {@link module:table/table~Table} feature offers table creation and editing t
 
 {@snippet features/table}
 
-## Styling tables
+## Styling tables and table cells
 
 {@snippet features/table-styling}