How can i use HTML tags in ZUL files

I'm working on a zk project and i want to have some HTML tags in my zul file.

For example i want to have a table with some columns and rows but in HTML format not with zul tags. i want to set id and class for some of tags but the id of a zul tag can be used in my java code and i cant's access it from a css file. The zul tags will have some random generated IDs when zk render them to html and i can't use those ID's to set a javascript function for it or set a style in my css files.

How can i do that ? Any idea ?

Solution

Suppose you have a zul file. You must have a <zk> </zk> tag which contains contents of you zul file.

First you must add something like this in your <zk> tag :

<zk xmlns:h="native">
....
</zk>

Then you can add some html tags in among your zul tags by using h: before them. for example this is a table with some columns and rows within a zk <hbox></hbox> and also you can put some zk tags in this html tags as i put a button here in a cell of table:

<zk xmlns:h="native">
....
    <hbox id="zk-hbox-id" visible="true">
        <h:table id="html-table-id">
            <h:tr>
                <h:td>
                    First Column
                </h:td>
                <h:td>
                    Second Column
                </h:td>
            </h:tr>
            <h:tr>
                <h:td>
                    <button id="zk-yes-id" label="Yes" sclass="zk-sclass" />
                </h:td>
                <h:td>
                    <button id="zk-no-id" label="No" sclass="zk-sclass" />
                </h:td>
            </h:tr>
        </h:table>
    </hbox>
....
</zk>

Now you can use for example html-table-id to set a javascript function or set a css for it.