treewide: convert HTML tables to div

Mostly convert HTML tables to div based markup to allow for easier styling
in the future. Also change JS accessor code accordingly.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

3 files changed, 102 insertions, 102 deletions

diff --git a/applications/luci-app-firewall/luasrc/view/firewall/cbi_addforward.htm b/applications/luci-app-firewall/luasrc/view/firewall/cbi_addforward.htm
index b3079f3a48..279b6e06d6 100644
--- a/applications/luci-app-firewall/luasrc/view/firewall/cbi_addforward.htm
+++ b/applications/luci-app-firewall/luasrc/view/firewall/cbi_addforward.htm
@@ -20,58 +20,58 @@
 -%>
 <div class="cbi-section-create cbi-tblsection-create">
 	<br />
-	<table class="cbi-section-table" style="width:810px; margin-left:5px">
-		<tr class="cbi-section-table-titles">
-			<th class="cbi-section-table-cell" colspan="8"><%:New port forward%>:</th>
-		</tr>
-		<tr class="cbi-section-table-descr">
-			<th class="cbi-section-table-cell"><%:Name%></th>
-			<th class="cbi-section-table-cell"><%:Protocol%></th>
-			<th class="cbi-section-table-cell"><%:External zone%></th>
-			<th class="cbi-section-table-cell"><%:External port%></th>
-			<th class="cbi-section-table-cell"><%:Internal zone%></th>
-			<th class="cbi-section-table-cell"><%:Internal IP address%></th>
-			<th class="cbi-section-table-cell"><%:Internal port%></th>
-			<th class="cbi-section-table-cell"></th>
-		</tr>
-		<tr class="cbi-section-table-row">
-			<td class="cbi-section-table-cell">
+	<div class="table cbi-section-table" style="width:810px; margin-left:5px">
+		<div class="tr cbi-section-table-titles">
+			<div class="th cbi-section-table-cell" colspan="8"><%:New port forward%>:</div>
+		</div>
+		<div class="tr cbi-section-table-descr">
+			<div class="th cbi-section-table-cell"><%:Name%></div>
+			<div class="th cbi-section-table-cell"><%:Protocol%></div>
+			<div class="th cbi-section-table-cell"><%:External zone%></div>
+			<div class="th cbi-section-table-cell"><%:External port%></div>
+			<div class="th cbi-section-table-cell"><%:Internal zone%></div>
+			<div class="th cbi-section-table-cell"><%:Internal IP address%></div>
+			<div class="th cbi-section-table-cell"><%:Internal port%></div>
+			<div class="th cbi-section-table-cell"></div>
+		</div>
+		<div class="tr cbi-section-table-row">
+			<div class="td cbi-section-table-cell">
 				<input type="text" class="cbi-input-text" id="_newfwd.name" name="_newfwd.name" placeholder="<%:New port forward%>" />
-			</td>
-			<td class="cbi-section-table-cell" style="width:110px">
+			</div>
+			<div class="td cbi-section-table-cell" style="width:110px">
 				<select class="cbi-input-select" id="_newfwd.proto" name="_newfwd.proto">
 					<option value="tcp udp">TCP+UDP</option>
 					<option value="tcp">TCP</option>
 					<option value="udp">UDP</option>
 					<option value="other"><%:Other...%></option>
 				</select>
-			</td>
-			<td class="cbi-section-table-cell" style="width:55px">
+			</div>
+			<div class="td cbi-section-table-cell" style="width:55px">
 				<select class="cbi-input-select" id="_newfwd.extzone" name="_newfwd.extzone">
 					<% for _, z in ipairs(ezl) do -%><option value="<%=z:name()%>"><%=z:name()%></option><%- end %>
 				</select>
-			</td>
-			<td class="cbi-section-table-cell" style="width:110px">
+			</div>
+			<div class="td cbi-section-table-cell" style="width:110px">
 				<input type="text" class="cbi-input-text" id="_newfwd.extport" name="_newfwd.extport" data-type="portrange" data-optional="true" />
-			</td>
-			<td class="cbi-section-table-cell" style="width:55px">
+			</div>
+			<div class="td cbi-section-table-cell" style="width:55px">
 				<select class="cbi-input-select" id="_newfwd.intzone" name="_newfwd.intzone">
 					<% for _, z in ipairs(izl) do -%><option value="<%=z:name()%>"><%=z:name()%></option><%- end %>
 				</select>
-			</td>
-			<td class="cbi-section-table-cell" style="width:110px">
+			</div>
+			<div class="td cbi-section-table-cell" style="width:110px">
 				<input type="text" class="cbi-input-text" id="_newfwd.intaddr" name="_newfwd.intaddr" data-type="host" data-optional="true"<%=
 					ifattr(#keys > 0, "data-choices", {keys, vals})
 				%>/>
-			</td>
-			<td class="cbi-section-table-cell" style="width:110px">
+			</div>
+			<div class="td cbi-section-table-cell" style="width:110px">
 				<input type="text" class="cbi-input-text" id="_newfwd.intport" name="_newfwd.intport" data-type="portrange" data-optional="true" />
-			</td>
-			<td class="cbi-section-table-cell">
+			</div>
+			<div class="td cbi-section-table-cell">
 				<input type="submit" class="cbi-button cbi-button-add" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" value="<%:Add%>" />
-			</td>
-		</tr>
-	</table>
+			</div>
+		</div>
+	</div>
 
 	<script type="text/javascript">//<![CDATA[
 		cbi_bind(document.getElementById('_newfwd.extport'), 'blur',
diff --git a/applications/luci-app-firewall/luasrc/view/firewall/cbi_addrule.htm b/applications/luci-app-firewall/luasrc/view/firewall/cbi_addrule.htm
index b06fac3de4..c99ecaca37 100644
--- a/applications/luci-app-firewall/luasrc/view/firewall/cbi_addrule.htm
+++ b/applications/luci-app-firewall/luasrc/view/firewall/cbi_addrule.htm
@@ -8,71 +8,71 @@
 <div class="cbi-section-create cbi-tblsection-create">
 	<% if wz then %>
 		<br />
-		<table class="cbi-section-table" style="margin-left:5px">
-			<tr class="cbi-section-table-titles">
-				<th class="cbi-section-table-cell left" colspan="4"><%:Open ports on router%>:</th>
-			</tr>
-			<tr class="cbi-section-table-descr">
-				<th class="cbi-section-table-cell"><%:Name%></th>
-				<th class="cbi-section-table-cell"><%:Protocol%></th>
-				<th class="cbi-section-table-cell"><%:External port%></th>
-				<th class="cbi-section-table-cell"></th>
-			</tr>
-			<tr class="cbi-section-table-row">
-				<td class="cbi-section-table-cell" style="width:130px">
+		<div class="table cbi-section-table" style="margin-left:5px">
+			<div class="tr cbi-section-table-titles">
+				<div class="th cbi-section-table-cell left" colspan="4"><%:Open ports on router%>:</div>
+			</div>
+			<div class="tr cbi-section-table-descr">
+				<div class="th cbi-section-table-cell"><%:Name%></div>
+				<div class="th cbi-section-table-cell"><%:Protocol%></div>
+				<div class="th cbi-section-table-cell"><%:External port%></div>
+				<div class="th cbi-section-table-cell"></div>
+			</div>
+			<div class="tr cbi-section-table-row">
+				<div class="td cbi-section-table-cell" style="width:130px">
 					<input type="text" class="cbi-input-text" id="_newopen.name" name="_newopen.name" placeholder="<%:New input rule%>" />
-				</td>
-				<td class="cbi-section-table-cell" style="width:110px">
+				</div>
+				<div class="td cbi-section-table-cell" style="width:110px">
 					<select class="cbi-input-select" id="_newopen.proto" name="_newopen.proto">
 						<option value="tcp udp">TCP+UDP</option>
 						<option value="tcp">TCP</option>
 						<option value="udp">UDP</option>
 						<option value="other"><%:Other...%></option>
 					</select>
-				</td>
-				<td class="cbi-section-table-cell" style="width:110px">
+				</div>
+				<div class="td cbi-section-table-cell" style="width:110px">
 					<input type="text" class="cbi-input-text" id="_newopen.extport" name="_newopen.extport" />
-				</td>
-				<td class="cbi-section-table-cell left">
+				</div>
+				<div class="td cbi-section-table-cell left">
 					<input type="submit" class="cbi-button cbi-button-add" name="_newopen.submit" value="<%:Add%>" />
-				</td>
-			</tr>
-		</table>
+				</div>
+			</div>
+		</div>
 	<% end %>
 	<% if #zones > 1 then %>
-		<table class="cbi-section-table" style="margin-left:5px">
-			<tr class="cbi-section-table-titles">
-				<th class="cbi-section-table-cell left" colspan="6"><br /><%:New forward rule%>:</th>
-			</tr>
-			<tr class="cbi-section-table-descr">
-				<th class="cbi-section-table-cell"><%:Name%></th>
-				<th class="cbi-section-table-cell"><%:Source zone%></th>
-				<th class="cbi-section-table-cell"><%:Destination zone%></th>
-				<th class="cbi-section-table-cell"></th>
-			</tr>
-			<tr class="cbi-section-table-row">
-				<td class="cbi-section-table-cell" style="width:130px">
+		<div class="table cbi-section-table" style="margin-left:5px">
+			<div class="tr cbi-section-table-titles">
+				<div class="th cbi-section-table-cell left" colspan="6"><br /><%:New forward rule%>:</div>
+			</div>
+			<div class="tr cbi-section-table-descr">
+				<div class="th cbi-section-table-cell"><%:Name%></div>
+				<div class="th cbi-section-table-cell"><%:Source zone%></div>
+				<div class="th cbi-section-table-cell"><%:Destination zone%></div>
+				<div class="th cbi-section-table-cell"></div>
+			</div>
+			<div class="tr cbi-section-table-row">
+				<div class="td cbi-section-table-cell" style="width:130px">
 					<input type="text" class="cbi-input-text" id="_newfwd.name" name="_newfwd.name" placeholder="<%:New forward rule%>" />
-				</td>
-				<td class="cbi-section-table-cell" style="width:110px">
+				</div>
+				<div class="td cbi-section-table-cell" style="width:110px">
 					<select class="cbi-input-text" id="_newfwd.src" name="_newfwd.src">
 						<% local k, v; for k, v in ipairs(fw:get_zones()) do -%>
 							<option<%=ifattr(v:name() == "wan", "selected", "selected")%> value="<%=v:name()%>"><%=v:name()%></option>
 						<%- end %>
 					</select>
-				</td>
-				<td class="cbi-section-table-cell" style="width:110px">
+				</div>
+				<div class="td cbi-section-table-cell" style="width:110px">
 					<select class="cbi-input-text" id="_newfwd.dest" name="_newfwd.dest">
 						<% local k, v; for k, v in ipairs(fw:get_zones()) do -%>
 							<option<%=ifattr(v:name() == "lan", "selected", "selected")%> value="<%=v:name()%>"><%=v:name()%></option>
 						<%- end %>
 					</select>
-				</td>
-				<td class="cbi-section-table-cell left">
+				</div>
+				<div class="td cbi-section-table-cell left">
 					<input type="submit" class="cbi-button cbi-button-link" name="_newfwd.submit" value="<%:Add and edit...%>" />
-				</td>
-			</tr>
-		</table>
+				</div>
+			</div>
+		</div>
 	<% else %>
 		<input type="submit" class="cbi-button cbi-button-add" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" value="<%:Add%>" />
 	<% end %>
diff --git a/applications/luci-app-firewall/luasrc/view/firewall/cbi_addsnat.htm b/applications/luci-app-firewall/luasrc/view/firewall/cbi_addsnat.htm
index 0a5913fc00..b2775cf694 100644
--- a/applications/luci-app-firewall/luasrc/view/firewall/cbi_addsnat.htm
+++ b/applications/luci-app-firewall/luasrc/view/firewall/cbi_addsnat.htm
@@ -15,49 +15,49 @@
 <div class="cbi-section-create cbi-tblsection-create">
 	<% if #zones > 1 then %>
 		<br />
-		<table class="cbi-section-table" style="width:700px; margin-left:5px">
-			<tr class="cbi-section-table-titles">
-				<th class="cbi-section-table-cell left" colspan="6"><%:New source NAT%>:</th>
-			</tr>
-			<tr class="cbi-section-table-descr">
-				<th class="cbi-section-table-cell"><%:Name%></th>
-				<th class="cbi-section-table-cell"><%:Source zone%></th>
-				<th class="cbi-section-table-cell"><%:Destination zone%></th>
-				<th class="cbi-section-table-cell"><%:To source IP%></th>
-				<th class="cbi-section-table-cell"><%:To source port%></th>
-				<th class="cbi-section-table-cell"></th>
-			</tr>
-			<tr class="cbi-section-table-row">
-				<td class="cbi-section-table-cell">
+		<div class="table cbi-section-table" style="width:700px; margin-left:5px">
+			<div class="tr cbi-section-table-titles">
+				<div class="th cbi-section-table-cell left" colspan="6"><%:New source NAT%>:</div>
+			</div>
+			<div class="tr cbi-section-table-descr">
+				<div class="th cbi-section-table-cell"><%:Name%></div>
+				<div class="th cbi-section-table-cell"><%:Source zone%></div>
+				<div class="th cbi-section-table-cell"><%:Destination zone%></div>
+				<div class="th cbi-section-table-cell"><%:To source IP%></div>
+				<div class="th cbi-section-table-cell"><%:To source port%></div>
+				<div class="th cbi-section-table-cell"></div>
+			</div>
+			<div class="tr cbi-section-table-row">
+				<div class="td cbi-section-table-cell">
 					<input type="text" class="cbi-input-text" id="_newsnat.name" name="_newsnat.name" placeholder="<%:New SNAT rule%>" />
-				</td>
-				<td class="cbi-section-table-cell" style="width:110px">
+				</div>
+				<div class="td cbi-section-table-cell" style="width:110px">
 					<select class="cbi-input-text" id="_newsnat.src" name="_newsnat.src">
 						<% local k, v; for k, v in ipairs(fw:get_zones()) do -%>
 							<option<%=ifattr(v:name() == "lan", "selected", "selected")%> value="<%=v:name()%>"><%=v:name()%></option>
 						<%- end %>
 					</select>
-				</td>
-				<td class="cbi-section-table-cell" style="width:110px">
+				</div>
+				<div class="td cbi-section-table-cell" style="width:110px">
 					<select class="cbi-input-text" id="_newsnat.dest" name="_newsnat.dest">
 						<% local k, v; for k, v in ipairs(fw:get_zones()) do -%>
 							<option<%=ifattr(v:name() == "wan", "selected", "selected")%> value="<%=v:name()%>"><%=v:name()%></option>
 						<%- end %>
 					</select>
-				</td>
-				<td class="cbi-section-table-cell" style="width:110px">
+				</div>
+				<div class="td cbi-section-table-cell" style="width:110px">
 					<input type="text" class="cbi-input-text" id="_newsnat.dip" name="_newsnat.dip" placeholder="<%:Do not rewrite%>" data-type="ip4addr" data-optional="true"<%=
 						ifattr(#keys > 0, "data-choices", { keys, vals })
 					%> />
-				</td>
-				<td class="cbi-section-table-cell" style="width:110px">
+				</div>
+				<div class="td cbi-section-table-cell" style="width:110px">
 					<input type="text" class="cbi-input-text" id="_newsnat.dport" name="_newsnat.dport" placeholder="<%:Do not rewrite%>" data-type="portrange" data-optional="true" />
-				</td>
-				<td class="cbi-section-table-cell">
+				</div>
+				<div class="td cbi-section-table-cell">
 					<input type="submit" class="cbi-button cbi-button-link" name="_newsnat.submit" value="<%:Add and edit...%>" />
-				</td>
-			</tr>
-		</table>
+				</div>
+			</div>
+		</div>
 	<% else %>
 		<input type="submit" class="cbi-button cbi-button-add" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" value="<%:Add%>" />
 	<% end %>