---
{
	"title": "Table Validator",
	"language": "en",
	"category": "Other",
	"description": "Web editor tool that helps to produce tables that conform to WCAG 2.0",
	"tag": "tablevalidator",
	"parentdir": "tablevalidator",
	"altLangPrefix": "tablevalidator",
	"js": ["demo/tablevalidator"],
	"dateModified": "2019-10-18"
}
---
<div class="wb-prettify"></div>

<p>The table validator is a web editor tool that helps to produce tables that conform to WCAG 2.0. This tools helps to identify relationship errors within a complex table. To use this validator, <strong>paste your HTML table source code</strong> in the text field below the <strong>Validate</strong> button.</p>

<details>
	<summary>Notice about using this tool</summary>

	<p>The HTML output generated by this tool may vary from browser to browser but will remain structurally similar. For instance, Internet Explorer capitalizes element names while Chrome and Firefox do not.</p>

	<p>The analysis is based on the structure of the submitted table. The contents of table cells will not have an impact on the results. This tool requires submitted tables to have well-defined visual relationships between the cells and that appropriate table markup is used. For further details, please consult the relevant WCAG Guideline and the <a href="https://wet-boew.github.io/wet-boew-legacy/v3.1/demos/tableparser/index-en.html">12 table techniques</a>.</p>
</details>

<form id="formtablevalidator" class="col-xs-12">
	<fieldset>
		<legend>Options</legend>
		<label class="checkbox-inline" for="chkHassum">
			<input type="checkbox" value="chkHassum" id="chkHassum" /> Has a summary group
		</label>
		<label class="checkbox-inline" for="chkCleanMarkup">
			<input type="checkbox" value="chkCleanMarkup" id="chkCleanMarkup" /> Do not clean up the HTML
		</label>
	</fieldset>

	<fieldset>
		<legend>Accessibility</legend>
		<label class="radio-inline" for="access-1">
			<input type="radio" name="access" checked="checked" id="access-1" /> Auto detect <em>(default)</em>
		</label>
		<label class="radio-inline" for="access-2">
			<input type="radio" name="access" id="access-2" /> Scope
		</label>
		<label class="radio-inline" for="access-3">
			<input type="radio" name="access" id="access-3" /> Ids/headers
		</label>
	</fieldset>

	<fieldset>
		<legend>Ids/headers settings</legend>
		<div class="form-group">
			<label for="idprefix">Ids prefix:</label>
			<input type="text" id="idprefix" value="tbl" class="form-control" />
		</div>
		<div class="checkbox">
			<label for="uniqueprefix">
				<input type="checkbox" value="uniqueprefix" id="uniqueprefix" /> Auto generate the prefix
			</label>
		</div>
	</fieldset>

	<fieldset>
		<legend>Validation tool</legend>
		<div class="form-group">
			<label for="inputsourcecode">Add table markup below including the <code>&lt;table&gt;&lt;/table&gt;</code> element</label>
			<textarea id="inputsourcecode" class="form-control" rows="15" cols="200" placeholder="Paste the source code for your HTML"></textarea>
		</div>
		<div class="form-group">
			<input id="validatetable" type="submit" value="Validate" class="btn btn-primary" />
		</div>
		<div class="form-group">
			<input type="reset" value="Reset page to defaults" class="btn btn-link btn-sm p-0 pt-4" />
		</div>
	</fieldset>

	<fieldset>
		<legend>Validation results</legend>
		<p id="lblerrors"><strong>Errors/Warnings:</strong></p>
		<div id="errors">
			<p>No errors or warnings</p>
		</div>
		<p id="lblresults"><strong>HTML Results:</strong></p>
		<div id="results">
			<p>No HTML results</p>
		</div>
		<p id="lblvisualoutput"><strong>Visual:</strong></p>
		<div id="visualoutput">
			<p>No visual output</p>
		</div>
	</fieldset>
</form>
