مصمم الجداول

معاينة

الرمز

ضغط رمز النمط
ضغط رمز الجدول

<div class="wrap-table100">
	<div class="table100 ver3 m-b-110">
		<div class="table100-head">
			<table>
				<thead>
					<tr class="row100 head">
						<th contenteditable="true" class="cell100 column1">Header 1</th>
						<th contenteditable="true" class="cell100 column2">Header 2</th>
						<th contenteditable="true" class="cell100 column3">Header 3</th>
						<th contenteditable="true" class="cell100 column4">Header 4</th>
					</tr>
				</thead>
			</table>
		</div>
		<div class="table100-body js-pscroll">
			<table>
				<tbody>
					<tr class="row100 body">
						<td contenteditable="true" class="cell100 column1">cell 1</td>
						<td contenteditable="true" class="cell100 column2">cell 2</td>
						<td contenteditable="true" class="cell100 column3">cell 3</td>
						<td contenteditable="true" class="cell100 column4">cell 4</td>
					</tr>
					<tr class="row100 body">
						<td contenteditable="true" class="cell100 column1"><br /></td>
						<td contenteditable="true" class="cell100 column2"><br /></td>
						<td contenteditable="true" class="cell100 column3"><br /></td>
						<td contenteditable="true" class="cell100 column4"><br /></td>
					</tr>
					<tr class="row100 body">
						<td contenteditable="true" class="cell100 column1"><br /></td>
						<td contenteditable="true" class="cell100 column2"><br /></td>
						<td contenteditable="true" class="cell100 column3"><br /></td>
						<td contenteditable="true" class="cell100 column4"><br /></td>
					</tr>
					<tr class="row100 body">
						<td contenteditable="true" class="cell100 column1"><br /></td>
						<td contenteditable="true" class="cell100 column2"><br /></td>
						<td contenteditable="true" class="cell100 column3"><br /></td>
						<td contenteditable="true" class="cell100 column4"><br /></td>
					</tr>
					<tr class="row100 body">
						<td contenteditable="true" class="cell100 column1"><br /></td>
						<td contenteditable="true" class="cell100 column2"><br /></td>
						<td contenteditable="true" class="cell100 column3"><br /></td>
						<td contenteditable="true" class="cell100 column4"><br /></td>
					</tr>
					<tr class="row100 body">
						<td contenteditable="true" class="cell100 column1"><br /></td>
						<td contenteditable="true" class="cell100 column2"><br /></td>
						<td contenteditable="true" class="cell100 column3"><br /></td>
						<td contenteditable="true" class="cell100 column4"><br /></td>
					</tr>
					<tr class="row100 body">
						<td contenteditable="true" class="cell100 column1"><br /></td>
						<td contenteditable="true" class="cell100 column2"><br /></td>
						<td contenteditable="true" class="cell100 column3"><br /></td>
						<td contenteditable="true" class="cell100 column4"><br /></td>
					</tr>
					<tr class="row100 body">
						<td contenteditable="true" class="cell100 column1"><br /></td>
						<td contenteditable="true" class="cell100 column2"><br /></td>
						<td contenteditable="true" class="cell100 column3"><br /></td>
						<td contenteditable="true" class="cell100 column4"><br /></td>
					</tr>
					<tr class="row100 body">
						<td contenteditable="true" class="cell100 column1"><br /></td>
						<td contenteditable="true" class="cell100 column2"><br /></td>
						<td contenteditable="true" class="cell100 column3"><br /></td>
						<td contenteditable="true" class="cell100 column4"><br /></td>
					</tr>
					<tr class="row100 body">
						<td contenteditable="true" class="cell100 column1"><br /></td>
						<td contenteditable="true" class="cell100 column2"><br /></td>
						<td contenteditable="true" class="cell100 column3"><br /></td>
						<td contenteditable="true" class="cell100 column4"><br /></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>

<div class="wrap-table100">
	<div class="table100 ver3 mx-auto my-3">
		<table data-vertable="ver3">
			<thead>
				<tr class="row100 head">
					<th contenteditable="true" class="column100 column1" data-column="column1"></th>
					<th contenteditable="true" class="column100 column2" data-column="column2">SUNDAY</th>
					<th contenteditable="true" class="column100 column3" data-column="column3">MONDAY</th>
					<th contenteditable="true" class="column100 column4" data-column="column4">Header 4</th>
					<th contenteditable="true" class="column100 column5" data-column="column5">Header 5</th>
				</tr>
			</thead>
			<tbody>
				<tr class="row100">
					<td contenteditable="true" class="column100 column1" data-column="column1">Jane Medina</td>
					<td contenteditable="true" class="column100 column2" data-column="column2">8:00 AM</td>
					<td contenteditable="true" class="column100 column3" data-column="column3"> -- </td>
					<td contenteditable="true" class="column100 column4" data-column="column4"> -- </td>
					<td contenteditable="true" class="column100 column5" data-column="column5"> -- </td>
				</tr>
				<tr class="row100">
					<td contenteditable="true" class="column100 column1" data-column="column1">Lawrence Scott</td>
					<td contenteditable="true" class="column100 column2" data-column="column2">9:00 AM</td>
					<td contenteditable="true" class="column100 column3" data-column="column3"> -- </td>
					<td contenteditable="true" class="column100 column4" data-column="column4"> -- </td>
					<td contenteditable="true" class="column100 column5" data-column="column5"> -- </td>
				</tr>
				<tr class="row100">
					<td contenteditable="true" class="column100 column1" data-column="column1"> -- </td>
					<td contenteditable="true" class="column100 column2" data-column="column2"> -- </td>
					<td contenteditable="true" class="column100 column3" data-column="column3"> -- </td>
					<td contenteditable="true" class="column100 column4" data-column="column4"> -- </td>
					<td contenteditable="true" class="column100 column5" data-column="column5"> -- </td>
				</tr>
				<tr class="row100">
					<td contenteditable="true" class="column100 column1" data-column="column1"> -- </td>
					<td contenteditable="true" class="column100 column2" data-column="column2"> -- </td>
					<td contenteditable="true" class="column100 column3" data-column="column3"> -- </td>
					<td contenteditable="true" class="column100 column4" data-column="column4"> -- </td>
					<td contenteditable="true" class="column100 column5" data-column="column5"> -- </td>
				</tr>
				<tr class="row100">
					<td contenteditable="true" class="column100 column1" data-column="column1"> -- </td>
					<td contenteditable="true" class="column100 column2" data-column="column2"> -- </td>
					<td contenteditable="true" class="column100 column3" data-column="column3"> -- </td>
					<td contenteditable="true" class="column100 column4" data-column="column4"> -- </td>
					<td contenteditable="true" class="column100 column5" data-column="column5"> -- </td>
				</tr>
				<tr class="row100">
					<td contenteditable="true" class="column100 column1" data-column="column1"> -- </td>
					<td contenteditable="true" class="column100 column2" data-column="column2"> -- </td>
					<td contenteditable="true" class="column100 column3" data-column="column3"> -- </td>
					<td contenteditable="true" class="column100 column4" data-column="column4"> -- </td>
					<td contenteditable="true" class="column100 column5" data-column="column5"> -- </td>
				</tr>
				<tr class="row100">
					<td contenteditable="true" class="column100 column1" data-column="column1"> -- </td>
					<td contenteditable="true" class="column100 column2" data-column="column2"> -- </td>
					<td contenteditable="true" class="column100 column3" data-column="column3"> -- </td>
					<td contenteditable="true" class="column100 column4" data-column="column4"> -- </td>
					<td contenteditable="true" class="column100 column5" data-column="column5"> -- </td>
				</tr>
				<tr class="row100">
					<td contenteditable="true" class="column100 column1" data-column="column1"> -- </td>
					<td contenteditable="true" class="column100 column2" data-column="column2"> -- </td>
					<td contenteditable="true" class="column100 column3" data-column="column3"> -- </td>
					<td contenteditable="true" class="column100 column4" data-column="column4"> -- </td>
					<td contenteditable="true" class="column100 column5" data-column="column5"> -- </td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

Tablemaker

معاينة

معاينة